Bootstrap前端框架

Bootstrap下载 

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstra

Bootstrap环境搭建

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

Bootstrap全局样式

• 排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。
• 我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

标题相关

<h1>一级标题36px</h1>
<h2>二级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>

<!--除了使用h标签，Bootstrap内置了相应的全局样式-->
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>

副标题

<h1>一级标题<small>小标题</small></h1>

文本类

常用对齐

<!--对齐-->
<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右对齐</p>

大小写
<!--大小写-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</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 class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

栅格系统

row必须放到container和container-fluid里面
内容应当放置于“列（column）”内，并且，只有“列（column）
”可以作为行（row）”的直接子元素。

        列的样式  .col-xx（lg md sm xs）-数字（1~12）  
            响应式应用：
                - col-md-6  
                - col-xs-8
        
        container有一个padding是15px
        row有一个margin是-15px
        
        列是支持嵌套的
        
        列偏移： col-xx-offset-数字（1~12）
        
        列排序：  .col-md-pull-数字 .col-md-push-数字
        

表格

    条纹状表格 .table-striped   --> 斑马线
    带边框的表格 .table-bordered    --> 加上外边框
    鼠标悬停变色的表格 .table-hover   --> 鼠标悬浮变色
    紧缩型表格 .table-condensed    --> padding减半
    响应式表格. .table-responsive  --> 自适应
6     响应式表格：
      <div class="table-responsive">  // table外面包裹一层div
      <table class="table">
      ...
      </table>
      </div>
      当屏幕宽度过小的时候，表格本身会出来滚动

表单

所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 
的元素都将被默认设置宽度属性为  100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

默认的
    - label标签放在input框上面
    .form-inline
    - 横着放一排
    .form-horizontal
    - label标签和input框左右分开放的
    都会用到：.form-group  --> label + input + span

表单状态类

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

按钮类

为 <a>、<button> 或 <input> 元素添加按钮类（button class） 即可使用 Bootstrap 提供的样式。

.btn
        
        颜色：
        .btn-default
        .btn-success
        .btn-warning
        .btn-danger
        
        尺寸：
        .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>

        块级btn:
        .btn-block







<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

 图片类

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。
   其实质是为图片设置了 max- 100%;、 height: auto; 和 display: block; 
   属性，从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive" alt="Responsive image">

图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded"> 圆角方
<img src="..." alt="..." class="img-circle">  圆图片
<img src="..." alt="..." class="img-thumbnail">方图片

 实用杂类

关闭按钮:
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角:<span class="caret"></span>

快速浮动:
<div class="pull-left">...</div>
<div class="pull-right">...</div>

内容块居中:<div class="center-block">...</div>
快速浮动:
　　　　　 - .pull-left
        　- .pull-right
清除浮动:
<!-- Usage as a class -->
<div class="clearfix">...</div>

显示或隐藏:
<div class="show">...</div>
<div class="hidden">...</div>

 水平居中

 文本类或行内标签居中

<div class="text-center">
  <p>这里是一段文本。</p>
</div>

水平居中一个col-*的div

 1.使用col-*-offset-*

<div class="container">
    <div class="row">
    <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">这是一个column div。</div>
  </div>
</div>

2.使用自定义样式

.col-centered {
  float: none;
  margin: 0 auto;
}



<div class="container">
  <div class="row">
    <div class="col-centered col-md-4" style="border: 1px solid red">这是一个column div。</div>
  </div>
</div>

注意点:补充

Bootstrap3里面有个.center-block样式类，可以用于不涉及float标签的水平居中

<div class="container">
  <div class="center-block" style="border: 1px solid red">一般水平居中</div>
</div>


ootstrap3.0.1版本新添加的.center-block样式类其实就是我们之前经常用到的margin: 0 auto。

Bootstrap4中：

    text-center还是用来水平居中display:inline的元素
    mx-auto取代center-block用来水平居中display:block的元素
    offset-*或mx-auto用来水平居中栅格系统的列元素

 垂直居中

.vertical-align {
  display: flex;
  align-items: center;
}

<div style="height: 200px;border: 1px solid black" class="vertical-align">
  <div style=" 100px;height: 100px;background-color: red"></div>
</div>