插件使用 之 bootstrap

Bootstrap

导入

<link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" type="text/css">

<script src="js/jquery-3.2.1.min.js"></script>

<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

栅格化（横向分12等份）

<div class="container"> 随窗口大小变动

   <div class="row">  一行4个、3个、2个  

      <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>

      <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>

<div class="col-lg-3">     栅格嵌套

  <div class="row">

 <div class="col-sm-3"></div>×4  

  </div>  

      </div>

   </div>                   

</div>

col-lg-     >1170
col-md-    >970
col-sm-    >750
col-xs-     <750  100%

<!--偏移量 1/12 -->

<div class="container">

   <div class="row">

      <div class="col-lg-2 col-md-3"></div>

      <div class="col-lg-2 col-md-3 col-lg-offset-2 col-md-offset-1"></div>

      <div class="col-lg-2 col-md-3 col-lg-offset-3 col-md-offset-2"></div>      

   </div>

</div>

按钮

<button>按钮</button>

<input type="button" value="按钮">

<a href="#">按钮</a>

class="btn btn_default"   默认   btn-lg   大

class="btn btn-primary"   蓝色   btn-sm  中

class="btn btn-success"   绿色   btn-xs   小

class="btn btn-info"      浅蓝   btn-block通栏按钮 (100%宽)

class="btn btn-warning"  橙色    btn-link  链接按钮

class="btn btn-danger"   红色    btn     声明按钮

按钮组

<div class="btn-group">

<a href="#" class="btn btn-info">按钮</a>

<a href="#" class="btn btn-warning">按钮</a>

</div>

通栏按钮组

<div class="btn-group btn-group-justified">

<a href="#" class="btn btn-warning">标签按钮</a>

<div class="btn-group">

<input type="button" class="btn btn-primary" value="按钮">

</div>

</div>

下拉按钮

表单class=

form         垂直表单
form-inline    一行表单
form-horizontal 水平表单
form-group    div添加  包裹标签和控件
form-control 文本框、下拉列表<input> <textarea> <select> 添加
checkbox checkbox-inline 多选框样式
radio radio-inline 单选框样式
input-group     表单控件组  搜索框+百度一下
nput-group-addon/input-group-btn 表单控件组物件/按钮
form-group-lg 大尺寸表单
form-group-sm 小尺寸表单

图片

<img src=”...” class=”img-responsive ”>  两边有内边距

                              img-rounded  圆角

                              img-circle     园

                              img-thumbnail 方框

隐藏类

hidden-xs

hidden-sm

hidden-md

hidden-lg

字体图标

<span class=”  ”></span>      图标类  自定义颜色、大小

bootstrap 下拉菜单

dropdown-toggle

dropdown-menu

bootstrap 选项卡

nav

nav-tabs

nav-pills

tab-content

bootstrap 导航条

navbar 声明导航条

navbar-default  默认导航条样式

navbar-inverse 声明反白的导航条样式

navbar-static-top 去掉导航条的圆角

navbar-fixed-top 固定到顶部的导航条

navbar-fixed-bottom 固定到底部的导航条

navbar-header 申明logo的容器

navbar-brand 针对logo等固定内容的样式

nav navbar-nav 定义导航条中的菜单

navbar-form 导航条中的表单     搜索框

navbar-btn  导航条中按钮 居中

navbar-text 定义导航条中的文本

navbar-left 菜单靠左

navbar-right 菜单靠右

bootstrap 模态框

1、modal 声明一个模态框

2、modal-dialog 定义模态框尺寸

3、modal-lg 定义大尺寸模态框

4、modal-sm 定义小尺寸模态框

5、modal-header

6、modal-body

7、modal-footer

bootstrap 响应式专题网站实例