Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------001（全局CSS样式）

看到网上很多帖子介绍这个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>

结果如下：

下一节介绍，组件的使用。

Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------001（全局CSS样式）

悦读