看到网上很多帖子介绍这个Bootstrap，介绍的一点也不系统。首先在我的印象中，Bootstrap一直的定位是“不懂美工的前端工程师的利器”，它的很多命令基本是基于class的定义来实现的。如果你的英文很不错，那Bootstrap的学习会如鱼得水，因为它的很多命令基本都是英语的本意。我会从Bootstrap的全局css样式，组件JavaScript插件三个方面，详细的介绍一下。并把Bootstrap4.0的最新特性讲述一下。
我们看一下，全部的代码，如图：所有源代码的地址：点击打开链接
我介绍的采取的是Bootstrap3.3.7的版本，就是现在3.0的最后一个版本。闲话不说，开始我们的介绍。
1.全局CSS样式介绍:
这部分内容，包括了栅格系统，排版，表格，表单，按钮，图片，辅助类，以及LESS的配合使用。当然从4.0开始预处理代码全面移动到SASS上面了。所以我建议大家学习sass，这个以后会好些.之前我写过less的介绍和使用，我会在后续介绍sass的使用。想学习less的，可以看我以前的文章。
㈠先说栅格系统：
3.3.7中栅格系统原理是基于less的媒体查询的来创建关键的分界点阈值，源码布局如下：
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }主要的一个宗旨就是一行12列，你按照一行总数12来布局，就能到达你想要的效果。参数如下：
代码如下：你只要对参数理解到位了，那就直接添加样式就可以。sm，md，lg规定大小规格。
<div class="container">
<!--添加这个container样式，主要是把你所写的代码放入到一个框子里面，居中与文档。没有也可以。-->
<div class="row">
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
<div class="col-md-1 a">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 a">.col-md-8</div>
<div class="col-md-4 a">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 a">.col-md-4</div>
<div class="col-md-4 a">.col-md-4</div>
<div class="col-md-4 a">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 a">.col-md-6</div>
<div class="col-md-6 a">.col-md-6</div>
</div>
</div>
㈡排版部分：
Bootstrap对文档的很多样式进行了复写，Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin），这部分，我将代码都全部整理了出来，如下：
<!--HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的
文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题-->
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<span class="h1">行内元素具有h1的class，就是不一样</span>
<!--Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素-->
<p>我被设置了等于 1/2 行高（即 10px）的底部外边距margin</p>
<p>我上面和我一样的段落元素设置了底部外边距（margin）</p>
<p class="lead">我加了lead的class样式，我会突出显示</p>
<p>Bootstrap<mark>教程</mark></p>
<del>对于被删除的文本使用</del><br/>
<s>对于没用的文本使用</s><br />
<u>为文本添加下划线</u>
<!--通过文本对齐类，可以简单方便的将文字重新对齐-->
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<!--通过这几个类可以改变文本的大小写，即大小写转换-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<!--移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。
这是针对直接子元素的，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。-->
<ul class="list-unstyled">
<li>列表类</li>
<li>列表类</li>
<li>列表类</li>
</ul>
<!--通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行-->
<ul class="list-inline">
<li>同一行的列表</li>
<li>同一行的列表</li>
<li>同一行的列表</li>
</ul>
㈢表格介绍
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 ，如果想创建响应式的表格，就把你创建的表格包裹，将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。所有关键代码如下：
<!--为任意 <table> 标签添加 .table 类可以为其赋予
基本的样式 — 少量的内补（padding）和水平方向的分隔线
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式
通过添加 .table-bordered 类为表格和其中的每个单元格增加边框
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格
-->
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>张三</td>
<td>22</td>
<td>北京</td>
</tr>
<tr class="danger">
<td>李四</td>
<td>23</td>
<td>深圳</td>
</tr>
<tr class="info">
<td>王五</td>
<td>24</td>
<td>上海</td>
</tr>
</tbody>
</table>
</div>
<img src="img/QQ截图20170318214120.png"/>
㈣表单的介绍
表单主要的就是form表单的使用，对这个标签进行样式定义，包括input的定义，以及多选框（checkbox），单选框（radio）的使用。更加详细的介绍在代码中：
<body>
<!--单独的表单控件会被自动赋予一些全局样式。
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素
都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列-->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--内联表单-->
<!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件-->
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form><br /><br />
<!--通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，
可以将 label 标签和控件组水平并排布局-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<!--包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：
text、password、datetime、datetime-local、date、month
time、week、number、email、url、search、tel 和 color-->
<input type="text" class="form-control" placeholder="Text input"><br /><br />
<textarea class="form-control" rows="3"></textarea>
<!--多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个-->
<!--通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）
或单选框（radio）控件上，可以使这些控件排列在一行-->
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 乒乓球
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 篮球
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 足球
</label>
<br />
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</body>
表单中的内联表单和水平排列的表单，就是在form标签上面，添加.form-inline 和 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类。其实最好的方式就是多使用，多练习。这样就会很快掌握。
㈤按钮，图片，辅助类
按钮：为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。在按钮上也可以预定义样式，比如颜色，状态（激活还是禁用）等。
<h1>按钮：</h1>
<!--为 <a>、<button> 或 <input> 元素添加按钮类（button class）
也可以设置按钮的预定义样式。即可使用 Bootstrap 提供的样式-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-success" type="button" value="成功success">
<input class="btn btn-info" type="submit" value="info">
<button class="btn btn-danger">danger</button>
<br /><br />
<!--需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮-->
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
<br />
<p>通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素 如下：</p>
<p>active设置为激活状态，disabled设置为禁用状态</p>
<button type="button" class="btn btn-primary btn-lg btn-block active">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block disabled">（块级元素）Block level button</button>
图片：在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。还有可以改变图片的形状。
<h1>图片：</h1>
<!--在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类-->
<img class="img-responsive center-block" src="img/QQ截图20170318224111.png"/>
辅助类：文本颜色，背景颜色，关闭按钮，三角按钮，快速浮动，清浮动，内容居中，显示和隐藏等等。代码如下：
<h1>辅助类:</h1>
<p>1.文本颜色：</p>
<p class="text-muted">我是什么颜色</p>
<p class="text-primary">我是什么颜色</p>
<p class="text-success">我是什么颜色</p>
<p class="text-info">我是什么颜色</p>
<p class="text-warning">我是什么颜色</p>
<p class="text-danger">我是什么颜色</p>
<p>2.背景颜色：</p>
<p class="bg-primary">我是什么背景颜色</p>
<p class="bg-success">我是什么背景颜色</p>
<p class="bg-info">我是什么背景颜色</p>
<p class="bg-warning">我是什么背景颜色</p>
<p class="bg-danger">我是什么背景颜色</p>
<p><button type="button" class="close" ><span aria-hidden="true">×</span></button></p>
三角符号：<span class="caret"></span><br /><br />
<!--通过添加一个类，可以将任意元素向左或向右浮动
但是排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right
-->
<!--通过为父元素添加 .clearfix 类可以很容易地清除浮动-->
<div class="clearfix">
<div class="pull-left">我是左浮动哦</div>
<div class="pull-right">我是右浮动哦</div>
</div><br /><br />
<!--.show 和 .hidden 类可以强制任意元素显示或隐藏-->
<div class="show">我是显示的</div>
<div class="hidden">我是隐藏的</div>
下一节介绍，组件的使用。
4870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
