admin 管理员组

文章数量: 887021


2023年12月17日发(作者：三类压力容器的分类)

软酷网官网：

Bootstrap的使用手册及学习笔记

Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。关于Bootstrap的介绍和下载，大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分：

2

3

4

...

HTML中定义的所有标题标签, 从

到

都是可用的。Bootstrap定义的全局

font-size 是 14px，line-height 是 20px。这些样式应用到了 和所有的段落上。另外，对

(段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

在使用Bootstrap之前必须要将或者（压缩版）引入到页面中，它定义了Bootstrap的基本样式。如果需要使用Bootstrap提供的组件，要将或者（压缩版）引入到页面中。因为bootstrap的JS插件需要Jquery的支持，所有在引入之前必须将也引入到页面上。另外如果你希望你的页面支持响应式布局，必须引入或者（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是必须放置在之后，否则便不具有响应式布局功能。当然在Bootstrap3的版本中，和已经合并了。

一、代码样式

Bootstrap提供了代码样式，用于在页面上展示代码，以此来区分于正文的区别，如果是行内嵌套代码，可以用标签，但是对于代码中的符号要进行转换（<是<、>是>）例如：

For example,

should be wrapped as inline.

如果是代码块可以用

标签，同样的，代码中的要将代码中的尖括号做转换。例如： 
1 
2   
 
3 
4    
Sample 
 
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 
三、表单 
基本的表单可以用
标签，只要定义了标签，标签里面的每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。例如： 
1 
2  
 
3    普通表单 
4     
5     
6    Example block-level help text here. 
7    
8       Check me out 
9     
10     
11  
 
12
 
另外，Bootstrap包含3个可选的常用表单布局，分别是搜索表单，行内表单，水平表单，例如： 
1搜索表单 
2 
3 
 
4  
5  
6 
 
          
                
         软酷网官网： 
1行内表单 
2 
3 
 
4  
5  
6 
7    Remember me 
8  
9  
10 
1 
2 
 
水平表单 
 
8 
 
9 
 
10    
11   
 
12      
13   
 
14 
 
15 
 
16    
17   
 
18      
19   
 
20 
 
21 
 
22   
 
23     
24        Remember me 
25      
26      
27   
 
28 
 
29 
 
四、按钮 
任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现和

五、下拉菜单按钮

下拉菜单的触发器和整个下拉菜单都需要包裹在 .dropdown 中，或者声明为position:

relative;的其它页面元素中。向 .dropdown-menu 添加 .pull-right 即可右对齐下拉菜

软酷网官网：

单。向

  • 添加 .disabled 即可禁用菜单中的某个链接，在现有的下拉菜单中，给任意的li添加 .dropdown-submenu即可自动赋予一个二级菜单，这个二级菜单会在鼠标悬停时自动展现。例如：

    六、按钮组

    将带有 .btn 类的一系列按钮包裹在 .btn-group 中，即可创建一个按钮组。例如：

    如果想创建一个将多个多维按钮组，只要将

    放入

    class="btn-toolbar">中即可获得更多复杂的组件，如果想让一组按钮呈现出垂直方向堆叠的样式，只需要在 .btn-group 的后面添加 .btn-group-vertical 类即可。

    七、分裂式按钮下拉菜单

    在按钮组的基础上，我们可以很容易的创建分裂式按钮。分裂式按钮左侧是一个标准形式的按钮，右侧是一个可触发下拉菜单的链接。例如：

    软酷网官网：

    动作

    链接或按钮上的data-toggle="dropdown"即表示激活下拉菜单，当然你也可以通过JS的方式来触发下拉事件，例如：

    注：如果 dropdown() 带上参数名为 toggle 的参数（dropdown('toggle')），即表示根据当前下拉菜单的状态来响应事件，如果下拉菜单是隐藏的即显示出来，如果是显示的即隐藏起来。

    八、选项卡

    基于

      并添加 .nav-tabs 或者是 .nav-pills 类即可创建一个选项卡，为任一导航组件（标签页、pills或列表）添加 .disabled 类，均可让链接变灰并失去鼠标悬停效果。

      软酷网官网：

      但是链接仍然是可以点击的，除非你将链接的href属性去除，你还可以写JavaScript代码阻止用户点击链接。例如：

      选项一的内容

      选项二的内容

      选项三的内容

      九、导航条

      在页面上添加导航条组件可以用 .navbar 类来定义，然后用 .navbar-inner 类将导航中的条目装载在一起，导航条中条目可以是无序列表,将导航条放入 .container 中就可以限制其宽度。如果想在导航条目中添加分隔符，只需增加一个空白的条目并为其设置一个类即可，如果想要在导航中添加一个表单，需要包含在 .navbar-form 类中，如果是搜索表单可以定义为 .navbar-search 。例如：

      Title

    如果想在导航条目中加入下拉菜单，只需要在导航条目

  • 的后面加上：

    十、面包屑

    面包屑组件可以用 .breadcrumb 类来定义，在页面上可以用于位置（路径）提示。例如：

    十一、分页

    分页用 .pagination 类来定义，定义如下：

  • 4

  • 5

  • Next

    • 可根据不同情况定制链接。用 .disabled 标明链接不可点击，用 .active 标明当前页。

    你还可以使用span标签替代a 标签，这样就去除了点击功能，同时又能保留需要的样式。

    如果需要更改分页器的大小，在class="pagination”里面添加 .pagination-large 、.pagination-small 或 .pagination-mini 就可以改变分页尺寸。如果需要定义“上一页”“下一页”的翻页样式”可以用 .page 类：

    分页也可使用 .disabled 工具类让链接处于禁用状态，添加在

  • 的 calss 属性里面。

    十二、提示框

    软酷网官网：

    提示框用 .alert 定义。例如：

    Warning! Best check yo self, you're not looking too good.

    接受 拒绝

    X

    提示

    这是一段提示信息。

    弹出对话框的样式有多钟选择可以定义为 alert-error、lert-success、alert-info。

    关闭对话框有两种方式，一种是通过链接的方式（Safari和Opera移动版浏览器上，当使用标签关闭警告框时，除了添加data-dismiss="alert"属性外，还需要包含href="#"属性），一种是通过按钮的方式。按钮方式如下：

    Warning! Best check yo self, you're not looking too good.

    如果你希望警告框在关闭时带有动画效果，请确保 .fade 和 .in类已经应用到这些警告框上。除此之外还可以通过调用JS的方式来达到关闭的效果，同时在关闭提示的时候还可以绑定事件，例如：

    //关闭提示最好放在一个方法里面，不然页面一启动，信息提示就关闭了

    $('#Myalert').alert('close');