文章目录
前言
BootStrap是一款移动端优先的前端框架，意义在于简化开发，提高效率。 其中的网格系统是整个布局的灵魂。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Bootstrap是什么？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT的。
- 移动端优先
- 响应式布局
- 简化开发，提高效率
二、网格系统
1.引入库
代码如下（示例）：
2.读入数据
代码如下（示例）：
二、CSS使用
bootstrap为用户提供了一整套现成的CSS样式，个人理解的bootstrap框架更像是一款CSS框架
1.文字标识
代码如下（示例）：
<div id="">
<!-- 突出 -->
<p class="lead">With the rapid development of science and technology,</p>
</div>
<div id="">
<!-- 高亮 -->
<mark>electronic technology tends to mature and has broad prospects.</mark>
</div>
<div id="">
<!-- 删除线 -->
<del>electronic technology tends to mature and has broad prospects.</del>
<s>electronic technology tends to mature and has broad prospects.</s>
</div>
<div id="">
<!-- 下划线 -->
<ins>electronic technology tends to mature and has broad prospects.</ins>
</div>
<div id="">
<!-- 斜体 -->
<em>electronic technology tends to mature and has broad prospects.</em>
</div>
<div id="">
<!-- 小号字体 -->
<small>electronic technology tends to mature and has broad prospects.</small>
</div>
<div id="">
<!-- 粗体 -->
<strong>electronic technology tends to mature and has broad prospects.</strong>
</div>
<div id="">
<!-- 代码样式 -->
<kbd>electronic technology tends to mature and has broad prospects.</kbd>
<kbd><</kbd>strong<kbd>></kbd>
</div>
2.表格
代码如下（示例）：
<div class="container">
<div class="row">
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-striped" border="" cellspacing="" cellpadding="">
<caption>基本表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>数据</th>
</tr>
</thead>
<tbody>
<tr>
<td>血糖</td>
<td>1.3</td>
</tr>
<tr>
<td>血压</td>
<td>93</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
具体的表格的样式可以参考
如果想让表格设置为响应式布局，可以在表格的父级标签中添加使用table-responsive样式
3.列表
列表分为有序列表与无需列表，基本的代码如下
代码如下（示例）：
<div class="col-md-12">
<ol>
<li>有序列表</li>
</ol>
</div>
<div class="col-md-12">
<ul>
<li>无序列表</li>
</ul>
</div>
<div class="col-md-12">
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
</div>
对于无序列表，我们可以在ul标签上加上 class="list-unstyled"来取消小圆点
4.面板与缩略图
<div class="container">
<div class="row">
<div class="col-lg-3 ">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">技术</h3>
</div>
<div class="panel-body">
内容
</div>
<div class="thumbnail">
<img src="./img/下载.jpg"
style="width: 60px;height: 60px;">
<div class="caption">
<h3>Git</h3>
<p>代码管理工具</p>
<p>
<a href="#" class="btn btn-primary" role="button">
收藏
</a>
<a href="#" class="btn btn-default" role="button">
评论
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
这里使用了一个面板嵌套缩略图，效果如下
5.导航栏
三、表单组件与布局
我们使用form-horizontal定义水平表单，注意在input框的class属性中需要定义一个form-control，让bootstrap中定义的CSS样式接管input框
<form class="form-horizontal" role="form" action="" method="post">
<div class="form-group">
<label for="uname" class="control-label col-sm-2">用户名:</label>
<div class="col-md-4">
<input class="form-control" type="text" id="uname" placeholder="用户名"/>
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-sm-2">密码:</label>
<div class="col-md-4">
<input type="password" class="form-control" id="upwd" placeholder="密码">
</div>
</div>
</form>
四、模态框插件
1.什么是模态框
对于模态框，其实就是网页中弹出的，有一定交互功能的对话框。在不同的环境下模态框可能是要求用户去填写一些信息，或者是做确认。 虽然原生的对话框也能有这个效果，但是毕竟原生的对话框太难看了。
2.代码
代码如下（示例）：
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</div>
</div>
上述代码来自菜鸟教程