bootstrap实战笔记

Bootstrap框架实战笔记

使用bootstrap框架必须,先引入框架文件:

bootstrap 布局方式是将页面分成一行12个列，同时布局要放到盒子类container 里面,类row 代码的是行，而类span代表的是列。

例如：

代表这行占用了12列的3列的宽度

响应式位移：

offse数字，例如offset4 就标签距离左边4个列的宽度距离。

代码案例：

此代码表示占用两个列的宽度，距离左边是4个列的宽度

响应式布局的使用类：

.visible-phone:在手机上显示这个元素

.visible-tablet:在平板电脑上显示这个元素

.visible-desktop:在普通电脑上显示这个元素

.hidden-phone :在手机上隐藏这个元素

.hidden-tablet:在平板电脑上隐藏这个元素

.hidden-desktop:在普通电脑上隐藏这个元素

:段落标签

到

:文章标题

:加粗标签

:标注提示标签

:斜体

:引用说明

文字内容

:左对齐显示文字内容

文字内容

:又对齐显示文字内容

:小字体

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器

。为了创建Well，只需要简单地把内容放在带有class .well 的

中即可。下面的实例演示了一个默认的Well：

代码案例：

您好，我在Well 中！

您可以使用可选类 well-lg 或 well-sm 来改变Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。代码案例：

您好，我在Well 中！

您好，我在Well 中！

响应是布局常用列表：

无序列表:ul

有序列表:ol

分类列表:dl

注意：dl列表里bootstrap提供了一个类dl-horizontal 能改变dl原有的样式bootstrap里面的

code标签：加重注释,加重突出

:段落突出显示,能原样显示文本原有的排版格式

bootstrap里面的表格:

表格头
表格内容

table (基本的样式，只要使用表格就必须添加这个类)

案例:

table table-striped(隔行变色)

案例:

table table-bordered(四周边框都有的)

案例:

table table-hover(移上变色)

案例:

table table-condensed (内边距变成原来的一半)

案例:

注：以上table的类可以混合使用，但是前提必须使用table类，后面在用其他的类。

Bootstrap中表格自带的行类：

success (成功信息的类，颜色会发生变化)

案例：

error(失败信息的类，颜色会发生变化)

案例：

warning(警告信息的类颜色会发生变化)

案例：

Info(信息提示类，颜色会发生变化)

案例：

Bootstrap中form表单:

说明：bootstrap中默认给form表单中的input标签添加了样式。

结合input标签使用

案例：用户名 类：help-block 用于输入信息提示的格式

案例：

输入用户名格式正确

用于查询功能表单的类：form-search 和search-query