2021年1月29日发(作者：时尚潮流英文)

软酷网官网：

Bootstrap

的使用手册及学习笔记

Bootstrap

是基于

HTML5

和

CSS3

开发的用于前端开发的工具包。关于

Bootstrap

的介

绍和下载，大家可以 去搜索查看。

Bootstrap

使用的某些

< br>HTML

元素和

CSS

属性需要 文档类

型为

HTML5

的文件类型。 因此这一文档类型必须出现在项目的每个页面的开始部分：

2

3

4

...

HTML

中定义的所有标题标签

,

从

到

都是可用的。

Bootstrap

定义的全局

font-size

是

14px

，

line-height

是

20px

。这些样式应用到了

和所有的段落上。

另外，对

(

段落

)

还定义了

1/2

行高

(

默认为

10px)

的底部外边距

(margin)

属性。

在使用

Boo tstrap

之前必须要将

或者

（压缩版）

引

入到页 面中，

它定义了

Bootstrap

的 基本样式。

如果需要使用

Bootstrap

< br>提供的组件，

要将

或者

（压缩版）

引入到页面中。

因为

bootstrap

的

JS< /p>

插件

需要

Jquery

< br>的支持，

所有在引入

之前必须将

也引入到页面上。

另

< br>外如果你希望你的页面支持响应式布局，必须引入

或者< /p>

（压缩版）

，

它 主要提供页面在移动设备上的显示样式支持，

需要注意的是

必须放置在

之后，否则便不具有

< p>
响应式布局功能。当然在

Bootstrap3

的 版本中，

和

已 经合并了。

一、代码样式

Bootstrap

提供了代码样式，

用于在页 面上展示代码，

以此来区分于正文的区别，

如果

是行内嵌套代码，

可以用


标签，


但是对于代码中的符号要进行转换


（

< p>
<

是

<

、

>

是

>

）

例如：

For example,

should be wrapped as inline.

如果是代码块 可以用

标签，

同样的，

代码中的要将代码中的尖括号做转换。

例如：

 

1 

2   

3 

4    
Sample text
here...
 

5    

6

7    

8

9    



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 



软酷网官网：




10    

11

12   
 

二、表格



基本的表格样式可以用

 

标签。例如：



1

正常表格


2    

7   

8   

9

10     

11 

12   

13   

14     

15

16 

17   

18   

19     

20

21 

22   

23   
 
First Name
 
Last
Name
 
Username
 

Mark
 
Otto
 
@mdo
 

Jacob
 
Thornton
 
@fat
 

如果想让表格的内容更紧凑一点可以为表格添加


.table-condensed 

类，如果想为表

格添加颜
色可以选择情景类，情景类有：

 

.success

.error 

.warning

.info 

表示成功或积极的行为



表示一个危险或存有潜在危险的行为



表示警告，可能需要注意



作为一个默认样式的一个替代样式



例如：



1 

2

3  

4

5    

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



软酷网官网：




6 

7  

8  

9    

10

11 

12  

13  

14

15    

16 

17  

18

19    

20    

21

22  

23  
 
First Name
 
Last
Name
 
 
Mark
 
Otto
 
Jacob
 
Thornton
 
Larry
the Bird
 
 

@twitter

@fat 

@mdo

Username

三、表单

 

基本的表单可以用


标签，只要定义了

<
/p>

标签，标签里面的每个单独的表单

控件都已经被赋予了样式。默认
是堆叠、

label

左侧对齐并在控件之上。例如：
<
p>
 

1 

2  


3

普通表单



4    Label name

5    

?


6    

7    

8

9     

10

11  

12
 

另外，

Boot
strap

包含

3

个可选的常用表单布
局，

分别是搜索表单，

行内表单，

水平
表

单，例如：

 

1
<
/p>

搜索表单



2

3 


4

?


5

6 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 

 



 

 



软酷网官网：


 

1

行内表单



2

3 

4 

5 

6 

7   

8
 

9 

10

1 

2 

 
<
p>

水平表单



 

8 

9 

10

11   

12     

13
 

14 
 

15 

16   

17

18     

19   
 

20 

21 

22   

23     

24

25     

26     

27