bootstrap基础知识

1. 字体比例大小

1 2 3

h1 small {    font - size : 65 % ; }

font-size:65%的意思是h3标签里面的small标签是外面一层字体的65%大小。

比如：

1	< h1 > Bootstrap标题一 < small >我是副标题 < / small > < / h1 >

Bootstrap标题一我是副标题

显示效果便是如上，small标签包含的文字外侧h1文字大小的65%

2. 斜体的设置

CSS方法：

1	< strong > font - style < / strong > : < strong > italic < / strong >

标签方法：

1	< em >我是斜体 < / em > < i >我也是斜体 < / i >

3.强调相关的类

1 2 3 4 5 6

. text - muted：提示，使用浅灰色（ #999） . text - primary：主要，使用蓝色（ #428bca） . text - success：成功，使用浅绿色 ( #3c763d) . text - info：通知信息，使用浅蓝色（ #31708f） . text - warning：警告，使用黄色（ #8a6d3b） . text - danger：危险，使用褐色（ ##a94442）

4.对齐相关的类

1 2 3 4 5 6 7 8 9 10 11 12

. text - left { text - align : left ; } . text - right { text - align : right ; } . text - center { text - align : center ; } . text - justify { text - align : justify ; }

5.列表

无标号列表

1	< ul class = "list-unstyled" >

无标号横向列表

1	< ul class = "list-inline" >

6.代码段

单行内联代码

1	< code >单行内联代码 < / code >

多行代码

1	< pre >多行代码 < / pre >

用户输入代码

1	< kbd >用户输入代码 < / kbd >

硬编码

1	左尖括号 & lt ; 右尖括号 & gt ;

滚动代码

1	class = "<b>.pre-scrollable</b>"

7.表格

1 2 3 4 5 6

. table：基础表格 . table - striped：斑马线表格 . table - bordered：带边框的表格 . table - hover：鼠标悬停高亮的表格 . table - condensed：紧凑型表格 . table - responsive：响应式表格

8.常用表单样式

纵向表单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< form role = "form" > < div class = "form-group" > < label for = "exampleInputEmail1" >邮箱： < / label > < input type = "email" class = "form-control" id = "exampleInputEmail1" placeholder = "请输入您的邮箱地址" > < / div > < div class = "form-group" > < label for = "exampleInputPassword1" >密码 < / label > < input type = "password" class = "form-control" id = "exampleInputPassword1" placeholder = "请输入您的邮箱密码" > < / div > < div class = "checkbox" > < label > < input type = "checkbox" > 记住密码 < / label > < / div > < button type = "submit" class = "btn btn-default" >进入邮箱 < / button > < / form >

水平表单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

< form class = "form-horizontal" role = "form" > < div class = "form-group" > < label for = "inputEmail3" class = "col-sm-2 control-label" >邮箱 < / label > < div class = "col-sm-10" > < input type = "email" class = "form-control" id = "inputEmail3" placeholder = "请输入您的邮箱地址" > < / div > < / div > < div class = "form-group" > < label for = "inputPassword3" class = "col-sm-2 control-label" >密码 < / label > < div class = "col-sm-10" > < input type = "password" class = "form-control" id = "inputPassword3" placeholder = "请输入您的邮箱密码" > < / div > < / div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < div class = "checkbox" > < label > < input type = "checkbox" > 记住密码 < / label > < / div > < / div > < / div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < button type = "submit" class = "btn btn-default" >进入邮箱 < / button > < / div > < / div > < / form >

下拉条和文本域

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< form role = "form" > < ! --下拉条 -- > < div class = "form-group" > < select class = "form-control" > < option > 1 < / option > < option > 2 < / option > < option > 3 < / option > < option > 4 < / option > < option > 5 < / option > < / select > < / div > < div class = "form-group" > < ! --文本域 -- > < textarea class = "form-control" rows = "3" > < / textarea > < / div > < / form >

单选框和复选框

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< form role = "form" > < h3 >案例 1 < / h3 > < div class = "checkbox" > < label > < input type = "checkbox" value = "" > 记住密码 < / label > < / div > < div class = "radio" > < label > < input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "love" checked > 喜欢 < / label > < / div > < div class = "radio" > < label > < input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "hate" > 不喜欢 < / label > < / div > < / form >