9_11 bootstarp使用

一。下载官网。

　　https://www.bootcss.com/

　　使用3版本

　　https://www.bootcdn.cn/

　　CDN搜索网址。

　　配置代码：

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

二。删格系统。

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类。

　　它将所有的div都设置成行式，在行中在用列作为其子元素。

　　通过设置col中的padding来设置列与列之间的宽度。

　　如果有多余的列就会换行。

 　　通过添加前缀就可以兼容多个设备，显示内容。

.col-xs-  //超小屏幕 手机 (<768px)
.col-sm-  //小屏幕 平板 (≥768px
.col-md- //中等屏幕 桌面显示器 (≥992px)
.col-lg-  //大屏幕 大桌面显示器 (≥1200px)

　　使用container可以定义一个大的框架。

　　使用container-fluid可以定义一个100%宽度的div框架。

　　建立一行的方法有：

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

　　使用row类就可以。

　　在row类中使用col-md-*就可以定义该类的占格。

　　列偏移：

　　使用以下方法可以讲列偏移一定的格子。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

　　列排序：

　　push代表从左往右推，pull代表从右往左推。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

三。排版

　　排版中有标题h1-h6。

　　也有《small》标签赋予小标题。

　　

四。表格。

　　如同创建一个普通表格一般，创建好表格后。

　　使用table类可以美化表格。

　　条状表格。

　　使用.table-striped 可以给表格打上条状的背景花纹。

　　带边框的表格。

　　使用table-bordered可以讲表格和每个单元格加上边框。

　　鼠标悬停

　　使用table-hover可以给表格添加一个鼠标悬停时的响应。

　　紧缩表格

　　使用table-condensed可以将表格更加紧凑。

　　使用以下类可以对单元格设置相应的颜色：

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

 

五。表单。

　　单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

六。按钮。

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

　　通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

七。图片。

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

　　如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。 

　　可以为图片设置不同的形状：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">