Bootstrap的使用手册及学习笔记

最新推荐文章于 2022-09-18 11:36:42 发布

wumengjie123

最新推荐文章于 2022-09-18 11:36:42 发布

阅读量1.3k

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Bootstrap的使用手册及学习笔记

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

<!DOCTYPE html>

2 <html lang="en">

3 ...

4 </html>

HTML中定义的所有标题标签, 从<h1> 到<h6> 都是可用的。Bootstrap定义的全局font-size 是 14px，line-height 是 20px。这些样式应用到了 <body> 和所有的段落上。另外，对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

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

一、代码样式

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

<p>For example, <code><section></code> should be wrapped as inline.</p>

如果是代码块可以用<pre>标签，同样的，代码中的要将代码中的尖括号做转换。例如：

1

2 <pre class="pre-scrollable">

4 <p>Sample text here...</p>

5 <p class="text-muted">...</p>

6 <p class="text-primary">...</p>

7 <p class="text-success">...</p>

8 <p class="text-info">...</p>

9 <p class="text-warning">...</p>

10 <p class="text-danger">...</p>

12 </pre>

二、表格

基本的表格样式可以用 <table> 标签。例如：

1<h4>正常表格</h4>

2 <!--

3 利用.table-bordered为表格和其中的每个单元格增加边框

4 利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式

5 利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态

6 -->

7 <table class="table table-striped table-bordered table-hover">

8 <tr>

9 <th>First Name</th>

10 <th>Last Name</th>

11 <th>Username</th>

12 </tr>

13 <tr>

14 <td>Mark</td>

15 <td>Otto</td>

16 <td>@mdo</td>

17 </tr>

18 <tr>

19 <td>Jacob</td>

20 <td>Thornton</td>

21 <td>@fat</td>

22 </tr>

23 </table>

如果想让表格的内容更紧凑一点可以为表格添加 .table-condensed 类，如果想为表格添加颜色可以选择情景类，情景类有：

.success	表示成功或积极的行为
.error	表示一个危险或存有潜在危险的行为
.warning	表示警告，可能需要注意
.info	作为一个默认样式的一个替代样式

例如：

1

2 <table class="table table-condensed">

3 <tr>

4 <th>First Name</th>

5 <th>Last Name</th>

6 <th>Username</th>

7 </tr>

8 <tr class="warning">

9 <td>Mark</td>

10 <td>Otto</td>

11 <td>@mdo</td>

12 </tr>

13 <tr class="error">

14 <td>Jacob</td>

15 <td>Thornton</td>

16 <td>@fat</td>

17 </tr>

18 <tr class="info">

19 <td>Larry</td>

20 <td>the Bird</td>

21 <td>@twitter</td>

22 </tr>

23 </table>

三、表单

基本的表单可以用<form>标签，只要定义了<form>标签，标签里面的每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。例如：

1<form>

2 <fieldset>

3 <legend>普通表单</legend>

4 <label>Label name</label>

5 <input type="text" placeholder="Type something…">

6 <span class="help-block">Example block-level help text here.</span>

7 <label class="checkbox">

8 <input type="checkbox"> Check me out

9 </label>

10 <button type="submit" class="btn">Submit</button>

11 </fieldset>

12</form>

另外，Bootstrap包含3个可选的常用表单布局，分别是搜索表单，行内表单，水平表单，例如：

1<legend>搜索表单</legend>

2

3 <form class="form-search">

4 <input type="text" class="input-medium search-query" placeholder="Type something…">

5 <button type="submit" class="btn">Search</button>

6 </form>

1<legend>行内表单</legend>

2

3 <form class="form-inline">

4 <input type="text" class="input-small" placeholder="Email">

5 <input type="password" class="input-small" placeholder="Password">

6 <label class="checkbox">

7 <input type="checkbox"> Remember me

8 </label>

9 <button type="submit" class="btn">Sign in</button>

10 </form>

1 <legend>水平表单</legend>

2 <!--

3为表单添加.form-horizontal类

4将label和控件包裹在.control-group中

5为label添加.control-label类

6将任何相关的控件包裹在.controls中，以确保最佳的对齐

7 -->

8 <form class="form-horizontal">

9 <div class="control-group">

10 <label class="control-label" for="inputEmail">Email</label>

11 <div class="controls">

12 <input type="text" id="inputEmail" placeholder="Email">

13 </div>

14 </div>

15 <div class="control-group">

16 <label class="control-label" for="inputPassword">Password</label>

17 <div class="controls">

18 <input type="password" id="inputPassword" placeholder="Password">

19 </div>

20 </div>

21 <div class="control-group">

22 <div class="controls">

23 <label class="checkbox">

24 <input type="checkbox"> Remember me

25 </label>

26 <button type="submit" class="btn">Sign in</button>

27 </div>

28 </div>

29 </form>

四、按钮

任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现<a>和 <button>页面元素。

按钮	class=""	描述
默认	btn	带渐变的标准灰色按钮
	btn btn-primary	提供额外的视觉感, 可在一系列的按钮中指出主要操作
	btn btn-info	默认样式的替代样式
	btn btn-success	表示成功或积极的动作
	btn btn-warning	提醒应该谨慎采取这个动作
	btn btn-danger	表示这个动作危险或存在危险
	btn btn-inverse	备用的暗灰色按钮，不依赖于语义和用途
链接	btn btn-link	简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为

如果想更改按钮的大小，可以在class类中添加 .btn-large 、.btn-small 或 .btn-mini即可改变按钮大小，通过由Glyphicons提供图片，可以给每个按钮设置一个小图标，使用时，每个图标都需要依附于一个<i>标签，并且赋予一个唯一的类（class），默认是深灰色，也可以使用反色（白色）样式的图标，只需增加一个额外的类 .icon-white 。例如：

<!--.btn-primary可以将按钮的颜色变蓝，.btn-large可以设置按钮的大小，对应的还有.btn-small.btn-mini

要想给按钮加上小图标可以使用<i>标签

-->

</div>

</div>

</div>

<button type="button" class="btn btn-primary btn-lg btn-block " disabled="disabled">Block level button</button>

<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

五、下拉菜单按钮

下拉菜单的触发器和整个下拉菜单都需要包裹在 .dropdown 中，或者声明为position: relative;的其它页面元素中。向 .dropdown-menu添加 .pull-right 即可右对齐下拉菜单。向<li>添加 .disabled 即可禁用菜单中的某个链接，在现有的下拉菜单中，给任意的li添加 .dropdown-submenu即可自动赋予一个二级菜单，这个二级菜单会在鼠标悬停时自动展现。例如：

Dropdown

</button>

<li><a tabindex="-1" href="#">Action</a></li>

<li><a tabindex="-1" href="#">Another action</a></li>

<li><a tabindex="-1" href="#">Something else here</a></li>

<li><a tabindex="-1" href="#">Separated link</a></li>

<a tabindex="-1" href="#">More options</a>

<li><a tabindex="-1" href="#">Another action</a></li>

<li><a tabindex="-1" href="#">Something else here</a></li>

</ul>

</li>

</ul>

</div>

六、按钮组

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

<button class="btn">Middle</button>

<button class="btn">Right</button>

</div>

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

七、分裂式按钮下拉菜单

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

动作

</a>

<li><a tabindex="-1" href="#">Action</a></li>

<li><a tabindex="-1" href="#">Another action</a></li>

</ul>

</div>

</button>

<li><a tabindex="-1" href="#">Action</a></li>

<li><a tabindex="-1" href="#">Another action</a></li>

</ul>

</div>

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

//对所有的class="dropdown-toggle"按钮或是链接定义下拉事件

$('.dropdown-toggle').dropdown()

//对ID=Mybtn的按钮或是链接定义下拉事件

$('#Mybtn').dropdown()

</script>

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

八、选项卡

基于<ul>并添加.nav-tabs 或者是 .nav-pills 类即可创建一个选项卡，为任一导航组件（标签页、pills或列表）添加 .disabled 类，均可让链接变灰并失去鼠标悬停效果。但是链接仍然是可以点击的，除非你将链接的href属性去除，你还可以写JavaScript代码阻止用户点击链接。例如：

<!--设置选项卡的展示样式：.nav-tabs .nav-pills

如果想创建堆叠式的排列，可以在nav-tabs（nav-pills）的后面添加nav-stacked -->

</ul>

<div class="tab-pane active" id="tab1"><p>选项一的内容</p></div>

<div class="tab-pane" id="tab2"><p>选项二的内容</p></div>

<div class="tab-pane" id="tab3"><p>选项三的内容</p></div>

</div>

九、导航条

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

<a class="brand" href="#">Title</a>

<!--在导航中添加一个普通表单

<button type="submit" class="btn">Submit</button>

</form>

-->

</form>

</ul>

</div>

如果想在导航条目中加入下拉菜单，只需要在导航条目 <li> 的后面加上：

Account

</a>

<li><a tabindex="-1" href="#">Action</a></li>

<li><a tabindex="-1" href="#">Another action</a></li>

</ul>

</li>

</ul>

十、面包屑

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

<li><a href="#">Library</a> <span class="divider">/</span></li>

</ul>

十一、分页

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

<ul>

</ul>

</div>

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

<ul>

...

</ul>

</div>

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

<ul>

...

</ul>

</div>

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

</ul>

</ul>

分页也可使用 .disabled 工具类让链接处于禁用状态，添加在<li>的 calss 属性里面。

十二、提示框

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

这是一段提示信息。

</div>

<strong>Warning!</strong> Best check yo self, you're not looking too good.

<p>

</p>

</div>

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

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

<strong>Warning!</strong> Best check yo self, you're not looking too good.

</div>

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

//给ID="Myalert"添加关闭时的事件绑定

$('#Myalert').bind('close', function () {

alert('提示信息即将被关闭');

})

$('#Myalert').bind('closed', function () {

alert('提示信息已经被关闭');

})

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

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

</script>

十三、静态对话框

模态对话框是一类简洁、灵活的的弹框，Bootstrap通过 .modal 类来定义整个对话框。对话框包含三个部分:标题、正文、页脚按钮，这是对话框的通用样式，其分别对应的样式类为：.modal-header、.modal-body、.modal-footer 。

.modal-header主要用于显示标题，也可以带有关闭按钮。.modal-body是正文部分，具体内容可自定义，一般为提示语，或是个表单。.modal-footer主要显示操作按钮，如"关闭"、"保存"等等，实例如下：

<!--定义一个.modal的div包围整个对话框内容 hide表示隐藏 fade是动画效果

data-backdrop="false" 表示没有背景遮挡，如是true表示显示黑色的页面背景且点击黑色背景会隐蔽modal

data-backdrop="static"表示有背景遮挡，并且点击对黑色背景区域，对话框不会消失-->

<h3>对话框标题</h3>

</div>

</div>

<a href="#" class="btn btn-primary">Save changes</a>

</div>

如上述代码所示，无论是触发还是关闭对话框都可以通过设置data属性来进行操作，无需编写JavaScript代码。在一个主控元素，例如按钮，上设置data-toggle="modal" ，然后将data-target="#modalID"（按钮上）或href="#fmodalID"（链接上）用以指向某个将要被启动的对话框，这样点击触发元素就会弹出对话框。关闭操作也是一样，在对话框内的某个触发元素上只需要指定 data-dismiss="modal" 即可。

当然你也可以使用JS的方式来进行触发或者是关闭操作。

$('#myModal').modal()

在触发对话框时还可以设置一些参数：

名称	类型	默认	描述
backdrop	布尔值	true	为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。为false时，无背景。
keyboard	布尔值	true	为true时按下ESC键关闭模态对话框。为false时无效。
show	布尔值	true	是否在初始化时显示对话框。

上面的参数都可以通过data属性或JavaScript代码传递给组件。对于data属性，将选项名称附着于data-字符串之后，就像data-backdrop=""一样。参数可以加到触发元素上，也可加到对话框元素上。

如果想通过javascript进行设置，如下:

$('#myModal').modal({

keyboard: false

})

另外还提供了几个控制方法，如下：

$('#myModal').modal('toggle')：手动打开或隐藏一个模态对话框。

$('#myModal').modal('show')：手动打开一个模态对话框。

$('#myModal').modal('hide'):手动隐藏一个模态对话框。

Bootstrap中的模态对话框对外暴露了一些事件允许你监听：

事件	描述
show	当show方法被调用时，此事件将被立即触发。
shown	当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。
hide	当hide方法被调用时，此事件被立即触发。
hidden	当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。

$('#myModal').on('事件名', function () {

// do something…

})

十四、工具提示

工具提示有两种形式，分别是 tooltip 和 popover 。实例如下：

<p><a title="这是一个提示信息" rel="tooltip" href="#">Tooltip</a></p>

<p><a class="btn" title="这是标题" data-content="这是提示的主要内容"

rel="popover" href="#">Popover</a></p>

如果想要触发提示信息，必须要写JS代码：

$('body').off('.data-api')

$("a[rel=tooltip]").tooltip()

$("a[rel=popover]").popover()

</script>

十五、进度条

进度条使用 .progress 类定义，默认样式是带有垂直渐变的进度条。例如：

</div>

如果想使用渐变创建的一个条纹效果的进度条（不支持IE7-8）可以在 <div class="progress">的class属性里面再加入一个 .progress-striped 类，如果为 .progress-striped 添加 .active ，即可创建一个从右向左变化的条纹样式（IE全系列都不支持此效果）如:

</div>

如果想创建堆叠样式可将多个进度条放入同一个 .progress 中即可，如:

</div>

备注：进度条依赖于CSS3的渐变、过度和动画特性，这些都是不被IE7-9 或较老版本的Firefox所支持的。IE10和Opera 12之前的版本均不支持动画特性。

十六、轮播

bootstrap为轮播组件定义了一套轮播的css样式，其中有三个最基本的样式 .carousel 、.carousel-inner 、.item 。

.carousel 是整个轮播的样式。 .carousel-inner 是幻灯片组的样式，所有的幻灯片都定义在其内。.item 是每张幻灯片的样式(其内是轮播的元素，比如单张图片)，这三个样式定义了整个轮播组件的架构。另外还有俩个 .carousel-indicators .carousel-control是可选的，这俩个是用于控制幻灯片。.carousel-indicators 是指示器，控制直接切换到哪张，.carousel-control是控制器，用于切换上一张、下一张。

在控制器和指示器中使用data属性可以很容易的控制轮播的位置。data-slide内可以包含prev （切换到上一张）或 next（切换到下一张），他们可以改变当前帧，一般用作控制器。另外，使用data-slide-to可以传递某个帧的下标，例如data-slide-to="2"，这样就可以直接跳转到这个指定的帧（一般用作指示器，下标从0开始计算）。例如：

</ol>

<p>Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景。</p>

</div>

<p>Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景.</p>

</div>

<p>Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景。</p>

</div>

</div>

当然你也可以使用JS的方式来启动轮播：

//将带有"carousel"类样式的元素作为轮播组件启动

$('.carousel').carousel()

//id="myCarousel"的元素作为轮播组件启动

$('#myCarousel').carousel()

备注：如果要控制轮播必须要结合bootstrap提供的属性方法。另外，如果你不用JS方式来启动的话，在页面的第一次刷新的时候，轮播并不会启动（图片不会自己转换），只有当然你点击了页面上的控制事件才后才会启动。

bootstrap提供了俩个参数用于对轮播过程进行控制。

名称	类型	默认值	描述
interval	number	5000	在自动轮播过程中，展示每帧所停留的时间。如果是false，轮播不会自动启动。
pause	string	"hover"	当鼠标在轮播区域内时暂停循环，在区域外时则继续循环。

例如初始化一个带有可选参数object的轮播，并且自动开始循环播放。

$('.carousel').carousel({

interval: 2000

})

另外还提供了几个用于对轮播控制的方法，如下：

.carousel('cycle'):从左向右循环播放。

.carousel('pause'):停止循环播放。

.carousel(number):循环到指定帧（下标从0开始，类似数组）。

.carousel('prev'):返回到上一帧。

.carousel('next'):下一帧。

Bootstrap的轮播插件对外暴露了两个可被监听的事件。

事件名	描述
slide	当slide实例方法被调用时，此事件会被立即触发。
slid	当切换完一帧后触发。

slide事件是在幻灯片每次切换时触发。slid事件是在每次切换完成时触发（如果存在过度效果则在过度效果完成后触发）。使用方式如下：

$('#myCarousel').on('事件名', function () {

....

})

wumengjie123

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap的使用手册及学习笔记

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

扫一扫