bootstrap学习笔记（学习中。。。）

一：bootstrap的特点

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。—摘自百度百科

二：bootstrap的排版

1.标题

bootstrap设置标题可以这样：”《h1》标题一《/h1》”,也可以这样“《div class=”h1”》标题一《/div》”（尖括号是英文的）。两种现实的效果是相同的，如图

2.副标题

副标题就是标题中加个标签，如：《h1》标题《small》我是副标题《/small》《/h1》，或者《h3》《small》副标题《/small》《/h3》。 效果如图

3.强调内容

强调内容个人感觉就是在一段话中把需要强调的放大，通过：class=”lead”来完成。《p》不需要强调显示的内容《/p》
《p class=”lead”》 强调的内容《/p》。效果如图：

4.粗体和斜体

粗体用《strong》标签，斜体用《em》或者《i》标签都行

5.强调相关的类

通过class=“xxx”来完成。比如成功，显示浅绿色，class=”text-sucess”；主要,蓝色显示,class=”text-primary”。（我觉得这样搞主要跟风格的统一有关）。《p class=”text-seucess”》成功了《/p》
《p class=”text-primary”》我是主要的《/p》。效果如图：

6.对齐

普通的css是这样的：style=”text-align:right”。在bootstrap是这样的class=”text-right”。但是效果相同

7.列表

1.有序列表,无序列表，自定义列表

有序列表：ol,无序列表：ul，自定义列表：dl。三者除了显示的时候边距跟普通html有点差别，其它都差不多。

2.去掉项目符号

有序去掉排列中的1,2,3,4…，无序列表去表点等排序符号。
方法：加上 class=”list-unstyled”

3.垂直列表变成水平列表

方法：加上 class=”list-inline”

8.代码

就是在HTML页面写代码。
把代码写在《code》《/code》标签，《pre》《/pre》，《kbd》《/kbd》标签中。《code》中一般写单个单词或者单个句子的代码；《pre》标签中写多行代码；《kbd》标签用来显示用户输入的代码。
例如：写一个ul (& gt;” 表示大于号 & lt;表示小于号)

如果想代码很多，但又想的结果显示在一个框内，可以使用class=”pre-scrollabe”来添加一个滚动条

9.表格

9.1表格基础

1.表格是bootstrap的的基础组建之一，bootstrap为表格提供了6中样式，一种是基础样式，4种附加样式还有一种支持响应式的样式。使用的时候只要添加对应的类名即可使用。
2.基础样式class=”table”；斑马线表格class=”table-striped”；带边框class=”table-bordered”；鼠标悬停高亮的表格class=”table-honver”；紧凑型表格class=”table-condensed”；响应式表格class=”table-responsive”（在bootstrap中表现为：当你的浏览器可视区域小于768px时，自动给你添加水平滚动条，大于768px水平滚动条就会自动消失）；
3.用法
注意可以几种样式结合使用，比如class=”table table-striped table-hover”,则同时具有斑马线和悬停高亮的效果。

9.2表格行的类

给表格的tr标签添加class属性，可以控制表格对应行的背景色。
比如， 显示浅黄色，表警告。具体如下图所示：