BootStrap--CSS组件

1.全局CSS样式——栅格布局系统

列的偏移问题(offset)

.col-xs-offset-1~.col-xs-offset-12 在lg/md/sm/xs屏幕下偏移

.col-sm-offset-1~.col-sm-offset-12 在lg/md/sm屏幕下偏移

.col-md-offset-1~.col-md-offset-12 在lg/md屏幕下偏移

.col-lg-offset-1~.col-lg-offset-12 在lg屏幕下偏移

2.全局CSS样式——表单——次重点&难点

Bootstrap中的表单分为三种：

(1)默认表单

<form>

</div>

</form>

(2)行内表单

</form>

(3)水平表单

使用栅格系统来控制label/input/help-block的宽度

</form>

3.组件——图标字体——愉快&简单

Glyphicons是一套收费的图标字体，提供了Web/移动开发中常用的小图标

Bootstrap中可以免费使用这套字体中的250+个；以服务器端字体形式出现的，即客户端若访问了使用Glyphicons字体的网站，会自动从服务器端下载对应的字体文件。

@font-face {

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

}

.glyphicon {

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings';

font-style: normal;

font-weight: normal;

line-height: 1;

}

提示：(1)图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体

(2)glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素！如：<span class="glyphicon glyphicon-***"></span>

4.组件——按钮组——简单

.btn-group 水平按钮组

.btn-group-vertical 竖直按钮组

.btn-group.btn-group-justified 水平且两端对齐的按钮组

.btn-group-lg

.btn-group-sm

.btn-group-xs

5.组件——下拉菜单——小重点&简单

下拉菜单必须HTML结构：

<div class="dropdown"> 相对定位的父元素

<a data-toggle="dropdown">触发元素</a>

<ul/div class="dropdown-menu"> 绝对定位

隐藏元素

</ul/div>

</div>

6.组件——导航——小重点&简单

提示：此处的导航不是指导航条！

Bootstrap提供了两种形式的导航：

(1)标签页式导航

</ul>

(2)胶囊式导航

</ul>

此外，还有两种导航变种：

(1)两端对齐的导航 .nav.nav-tabs/pills.nav-justified

(2)竖直放置的胶囊导航 .nav.nav-pills.nav-stacked

7.组件——路径导航(面包屑)/分页/标签/徽章/巨幕/水井/页头

面包屑： .breadcrumb

分页： .pagination .pager

标签： .label

徽章： .badge

巨幕： .jumbotron

水井： .well

页头： .page-header

8.组件——响应式导航条——重点&难点

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只有单击折叠按钮后才显示所有的菜单项。

基础class： .navbar

Bootstrap中导航条的按位置：

1)顶部导航条

2)底部导航条

Bootstrap中导航条的按颜色：

1)浅色底深色的字 .navbar-default

2)深色底浅色的字 .navbar-inverse

Bootstrap中导航条的按定位：

1)相对定位position: relative 默认值

2)固定定位position: fixed .navbar-fixed-top/bottom

导航条的结构：

</div>

</div>