GitHub上这样介绍 bootstrap:##
☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
☑ 基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设
计,12列格网,样式向导文档。
☑ 自定义JQuery插件,完整的类库,基于Less等。
基本的HTML模板##
Bootstrap的HTML标准模板
Hello, world!
全局样式##
Bootstrap框架的核心是轻量的CSS基础代码库,他并没有一味的重置样式,而是注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式
强调相关的类##
Bootstrap定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
Bootstrap根据平时的使用情形提供了六种形式的列表:
☑ 普通列表
☑ 有序列表
☑ 去点列表(.list-unstyled)
☑ 内联列表(.list-inline)
☑ 描述列表
☑ 水平描述列表(.dl-horizontal)
代码(一)##
本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:
1、使用
来显示单行内联代码
2、使用来显示多行块代码
3、使用来显示用户输入代码
预编译版本的Bootstrap将代码的样式单独提取出来:
1、LESS版本,请查阅code.less文件
2、Sass版本,请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。
在使用代码时,用户可以根据具体的需求来使用不同的类型:
1、:一般是针对于单个单词或单个句子的代码
2、:一般是针对于多行代码(也就是成块的代码)
3、:一般是表示用户要通过键盘输入的内容
虽然不同的类型风格不一样,但其使用方法是类似的。
code风格:
Bootstrap的代码风格有三种:
pre风格:
- ...
- ...
- ...
在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
/源码请查看bootstrap.css第731行~第734行/
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
kbd风格:
请输入ctrl+c来复制代码,然后使用ctrl+v来粘贴代码
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代。
而且对于代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。
表格##
表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格。
同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本:
☑ LESS版本,对应的文件是 tables.less
☑ Sass版本,对应的文件是 _tables.scss
Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
Bootstrap还为表格的行元素 特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。 注意要实现悬浮状态,需要在 如下代码: 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:
标签上加入table-hover类。
基础表单##