Bootstrap复习

Bootstrap复习

Bootstrap采用响应式布局 同一套页面可以兼容不同分辨率的设备。

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

定义容器。相当于之前的table、

容器分类：

container：两边留白container-fluid：每一种设备都是100%宽度

定义行。相当于之前的tr 样式：row定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

设备代号：

xs：超小屏幕 手机 (<768px)：col-xs-12sm：小屏幕 平板 (≥768px)md：中等屏幕 桌面显示器 (≥992px)lg：大屏幕 大桌面显示器 (≥1200px)

注意：

一行中如果格子数目超过12，则超出部分自动换行。栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和JS插件

全局CSS样式：

按钮：class=“btn btn-default”图片：

class=“img-responsive”：图片在任意尺寸都占100%图片形状

：方形： 圆形：相框

表格

tabletable-borderedtable-hover

表单

给表单项添加：class=“form-control”

组件：

导航条分页条

插件：

轮播图

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。