bootstrap基础知识

响应式布局

同一套页面可以兼容不同分辨率的设备。

1.实现:

依赖于栅格系统:将一行平均分成12个格子，可以指定元素占几个格子

2.步骤:

1).定义容器。

相当于之前的table

容器分类:

1container:两边留白

2container-fluid:每一种设备都是100%宽度

2).定义行。

相当于之前的tr样式:row

3).定义元素。

指定该元素在不同的设备上，所占的格子数目。样式:col-设备代号-格子数目

设备代号:

1xs:超小屏幕手机(<768px):col-xs-122sm:小屏幕平板(≥768px)

③md:中等屏幕桌面显示器(≥992px)4lg:大屏幕大桌面显示器(≥1200px)

 

注意:

1一行中如果格子数目超过12，则超出部分自动换行。

②栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

③如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

表格:

table

table-bordered table-hover

表单:

给表单项添加:class="form-control"

 

2.组件:

导航条分页条

 

3.插件:

轮播图

CSS样式和JS插件

1.全局CSS样式:

按钮:

class="btn btn-default"

图片:

class="img-responsive":图片在任意尺寸都占100%图片形状

    <img src=".…." alt=".…." class="img-

rounded">:方形

    <img src=".…." alt=".…." class="img-circle">

:圆形

    <img src=".…." alt=".…" class="img-

thumbnail">:相框

下拉菜单

注意：

在使用下拉菜单之前必须上面3个文件（bootstrap的css文件、jquery的js文件、bootstrap的js文件）都引入

下拉菜单的整体都必须在一个div块中，该块用下拉菜单类名修饰（dropdown或btn-group：下拉菜单、dropup：上拉菜单）

按钮应使用button作为父菜单，使用类名：dropdown-toggle（下拉菜单的样式）和data-toggle=“dropdown”属性

设置下拉箭头使用行内元素的caret类

下拉菜单的列表用dropdown-menu类标识，该列表内有列表头，用dropdown-header类标识，多个列表头之间用分割线分开，用divider类标识。

若想要选中列表中的某个元素，则该元素用active类标识；若想要禁用列表中的某个元素，则该元素用disabled类标识

缩略图

前言：在bootstrap中类名为thumbnail的块将被解析为缩略图

注意：缩略图的实现是配合网格系统一起使用，同时还可以让缩略图配合标题、描述内容按钮等。

本文叙述内容不全面望悉知，如有错误请谅解。