《bootstrap用户手册》读书笔记（2）

3.网格系统

实现原理

将容器分成12份

.container

.row

.row-md-1

工作原理

（1）数据行（.row）必须包含在容器（container）中

（2）在行（.row）中可添加列（.column）,但列数之和不能超过评分的总列数如12

col-md-4;col-md-8;

（3）具体内容放置在（column）中，而且只有列（column）才能作为行元素的直接容器（.row）

基本用法

（1）列组合，更改数字合并列

<div class="row">

<div class="col-md-4"></div>

<div class="col-md-8"></div>

</div>

列偏移（.col-md-offset-*）*向右偏移的列数

列与总偏移列不超过12

列排序（.col-md-pull,.col-md-push）

列的嵌套

4.下拉菜单

使用方法：

（1）使用一个dropdown的容器包裹一个下拉菜单的元素

<div class="dropdown"></div>

（2）使用一个botton按钮作为副菜单，且定义类名为dropdown-toggle和自定义data-toggle属性，且必须与最外容器名一致；

data-toggle=dropdown;

（3）下拉菜单使用一个ul列表，并且定义一个类dropdown-menu;

<ul class="dropdown-menu">

下拉分隔线

给<li>添加.divider

菜单标题

给<li>添加.dropdown-header

对齐方式

默认左对齐，若想相对于父容器右对齐，可在dropdown-menu上添加一个pull-right或者drop-menu-right,同时一定给.dropdown添加float:left样式

左对齐：dropdown-menu-left;

菜单项状态（.ative与disabled）

5.按钮组（.btngroup容器）

按钮工具栏（btn-toolbar）

按钮组大小设置

.btn-group-lg

.btn-group-sm

.btn-group-xs

嵌套分组

（导航菜单）只需将制作下拉菜单的dropdown容器换成btn-group，并且和普通的按钮放在同一级

垂直分组，将btn-group换成btn-group-vertical

等分按钮，在btn-group上追加btn-group-justified

按钮下拉菜单

将div.dropdown换成divbtn-group

按钮向上向下三角形

向下：添加<span>标签并且命名caret

向上弹起，btn-group或者dropdown追加dropup类

6.导航

基础导航.nav;

Tab标签型导航.nav,.nav-tabs,当前选中项<li>标签添加active，禁用添加disabled;

Pill胶囊型导航.nav,.nav-pills；

垂直堆叠的导航.nav-pills后添加nav-stacked；

分隔线<li .nav-divider>;

自适应导航.nav-justified

导航加下拉菜单（二级导航）

将<li>作为父容器,使用类名dropdown,同时在<li>中嵌套另一个列表ul；

分割线<li class="nav-divider"></li>

面包屑式导航

<ol>加入breadcrumb

7.导航条

基础导航条

（1）在制作导航的列表基础上添加navbar-nav;

（2）在列表外部添加一个容器div，并且使用navbar和navbar-default

加入导航条标题

navbar-header,navbar-brand

导航条状态，二级菜单

带表单的导航条

navbar-form

navbar-left

navbar-right

导航条里的按钮.navbar-btn

导航条里的文本.navbar-text

导航条里的普通链接.navbar-link

固定导航条

.navbar-fixed-top;

.navbar-fixed-bottom;

(存在bug)

响应式导航条

使用方法：

（1）在窄屏需要折叠的内容必须包裹在一个div里，并带有类名collapse,navbar-collapse;

（2）保证在窄屏时要显示的图片样式；

（3）并为button添加data-target=".类名/#id名"，具体由折叠的div决定

反色导航条

将navbar-default换成navbar-inverse

分页导航

（1）带页码

ul>li>a，ul标签加pagination;

大小设置，pagination-lg,pagination-sm;

（2）翻页分页导航

ul>li>a，ul标签加pager;

对齐样式：previous居左；next居右；

状态样式设置：disabled,将a标签换成span标签；