如何使用bootstrap框架
时间: 2023-11-26 11:48:21 浏览: 45
使用Bootstrap框架可以通过引入Bootstrap的CSS和JavaScript文件来实现。在HTML文件的<head>标签中添加以下代码引入Bootstrap的CSS文件:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
然后,在<body>标签中添加需要使用的Bootstrap组件和样式。例如,如果要创建一个带有输入框和按钮的表单,可以使用以下代码:
<div class="container">
<form>
<div class="mb-3">
<label for="username" class="form-label">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
在上述代码中,使用了Bootstrap的容器类"container"来包裹表单,使用了"form-control"类来给输入框添加样式,使用了"btn"和"btn-primary"类来给按钮添加样式。通过这样的方式,可以使用Bootstrap框架来快速创建具有样式的表单。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [BootStrap框架的使用总结](https://blog.csdn.net/qq_43168442/article/details/105037895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]