插件使用 之 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 响应式专题网站实例