bootstrap笔记
2014-02-17 17:50:21 lstoryc 阅读数 14

Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。

Bootstrap基于 HTML、CSS、JAVASCRIPT。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

2018-08-07 20:01:39 qq_38362772 阅读数 69
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>输入框添加按钮组</h1>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary" type="button">Basic Button</button>  
    </div>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">Go</button>  
     </div>
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">OK</button>  
      <button class="btn btn-danger" type="button">Cancel</button>  
     </div>
  </div>
</div>

</body>
</html>

input-group:按钮组

btn-outline-secondary:设置按钮样式

placeholder:输入框提示内容

form-control:设置输入框样式

input-group-prepend:添加内容

btn-primary btn-danger:设置按钮颜色

  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>自定义控件显示在同一行</h2>
  <p>我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件,这样自定义表单控件就能显示在同一行:</p>
  <form action="/action_page.php">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio1" name="example1">
      <label class="custom-control-label" for="customRadio1">自定义单选框 1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio2" name="example2">
      <label class="custom-control-label" for="customRadio2">自定义单选框 2</label>
    </div>
	  <div class="custom-control custom-radio custom-control-inline">
		  <input type="radio" class="custom-control-input" id="customRadio3" name="example3">
		  <label class="custom-control-label" for="customRadio3">自定义单选框 3</label>
	  </div>	  
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

</body>
</html>

如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox

复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。

custom-control-inline:使得复选框在一条水平线上

custom-control-input:输入框类

custom-control-label:标签类

2017-04-24 00:46:00 weixin_33806300 阅读数 1

CSS全局样式



概览

移动设备优先

<meta name="viewport" content="width=device-width,initial-scale=1">

布局容器

1、container类用于固定宽度并支持响应式布局的容器

2、container-fluid类用于100%宽度,占据全部视口(viewport)的容器。


栅格系统

1、最多12列

2、行(row)必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中。

3、为.column设置padding属性,从而创建列与列之间的间隔(gutter)

4、为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

5、“列(column)”大于12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

6、某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用.clearfix和响应式工具类。

<!-- Add the extra clearfix for only the required viewport -->

<div class="clearfix visible-xs-block"></div>

列偏移

.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列(column)的宽度

列排序

.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column)的顺序



排版

1、.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式。

在标题内还可以包含标签或赋予.small类的元素,可以用来标记副标题

2、页面主题<p>...</p>中心内容.lead

3、内联文本元素

标记文本<mark>

被删除的文本<del>

无用文本<s>

插入文本<ins>

带下划线的文本<u>

小号文本<small>

着重<strong>

斜体<em>

4、对齐.text-

                left|center|right|justify|nowrap

5、大小写.text-

               lowercase|uppercase|capitalize

6、缩略语<abbr>、地址<address>

7、引用

默认

<blockquote><p>...</p></blockquote>

命名来源<footer>。来源名称可以包裹进<cite>标签中

.blockquote-reverse类可以让引用呈现内容右对齐的效果

8、无样式列表.list-unstyled

内联列表.list-inline

描述dl>dt+dd(水平.dl-horizontal)

<kbd>标签标记用户通过键盘输入的内容


表格

1、为任意标签添加.table类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

2、.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式

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

4、.table-hover类可以让<tbody>中的每一行对鼠标悬停状态做出响应

5、.table-condensed类可以让表格更加紧凑,单元格中的内补(padding)均会减半

6、<tr>|<td>:.active|.success|.info|.warning|.danger

响应式表格

1、.table元素包裹在.table-responsive元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动

2、Firefox浏览器对fieldset元素设置了一些影响width属性的样式,导致响应式表格出现问题。可以使用下面提供的针对Firefox的hack代码解决,但是以下代码并未集成在Bootstrap中:

@-moz-document url-prefix() {

fieldset { display: table-cell; }

}


表单

1、将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%(截图或代码上来)

form>div.form-group>(label for="exampleInputEmail1")+(input.form-control#exampleInputEmail1)

内联表单

1、为元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件

2、一定要添加label标签,可以通过为label设置.sr-only类将其隐藏

3、水平排列的表单.form-horizontal

4、内联单选和多选框.checkbox-inline或.radio-inline

5、添加额外的图标设置相应的.has-feedback类并添加正确的图标即可。

6、反馈图标(feedback icon)只能使用在文本输入框<input class="form-control">元素上

7、.input-lg类似的类可以为控件设置高度,通过.col-lg-*类似的类可以为控件设置宽度

8、用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度


按钮

1、预定义样式.btn.default/.btn-primary/.btn-success/.btn-info/.btn-warning/.btn-danger/.btn-link

2、尺寸.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮

3、、给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素

激活状态

对于<button>元素,是通过:active状态实现的,对于<a>元素,是通过.active类实现的。然而,你还可以将 .active 应用到<button>上(包含aria-pressed="true"属性)),并通过编程的方式使其处于激活状态


图片

1、响应式图片<img src="..." class="img-response" alt="Responsive image">

2、图片形状.img-round/.img-circle/.img-thumbnail


辅助类

1、情境文本颜色<p>.text-muted/text-primary/text-success/text-info/text-warning/text-danger

2、情境背景色.bg-primary/.bg-success/.bg-info/.bg-warning/.bg-danger

3、关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true"></span></button>

4、三角符号<span class="caret">

5、快速浮动.pull-left/.pull-right

6、让内容块居中为任意元素设置display: block属性并通过margin属性让其中的内容居中

.center-block

7、清除浮动.clearfix

8、显示隐藏内容.show/.hidden

9、图片替换使用.text-hide类或对应的mixin可以用来将元素的文本内容替换为一张背景图

�<h1 class="text-hide">



组件



字体图标

1、所有图标都需要一个基类和对应每个图标的类

2、务必在图标和文本之间添加一个空格

3、不要和其他组件混合使用:图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的标签,并将图标类应用到这个标签上。

4、图标类只能应用在不包含任何文本内容或子元素的元素上。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>


下拉菜单

1、将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position: relative;的元素(代码)

2、通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出

3、为.dropdown-menu添加.dropdown-menu-right类可以让菜单右对齐

4、在任何下拉菜单中均可通过添加标题来标明一组动作

<li class="dropdown-header">

5、为下拉菜单添加一条分割线,用于将多个链接分组。

<li role="separator" class="divider">


按钮组

<div class="btn-group" role="group" aria-label="...">包裹buttons

1、当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定 container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。

2、按钮工具栏

把一组<div >组合进一个<div class="btn-toolbar">中就组合进一个<div class="btn-toolbar">可以做成更复杂的组件

3、把下拉菜单混合到一系列按钮中,只须把.btn-group放入另一个.btn-group中

4、让一组按钮垂直堆叠排列显示而不是水平排列.btn-group-vertical

5、两端对齐排列的按钮组

<a>元素只须将一系列.btn元素包裹到.btn-group.btn-group-justified中即可

将<button>元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中


输入框组

1、为.input-group赋予.input-group-addon或.input-group-btn类,可以给.form-control的前面或后面添加额外的元素

2、不支持在输入框的单独一侧添加多个额外元素(.input-group-addon或.input-group-btn)。

不支持在单个输入框组中添加多个表单控件


导航.nav

1、必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性

2、导航组件实现导航条功能,务必在<ul>的最外侧的逻辑父元素上添加role="navigation"属性,或者用一个<nav>元素包裹整个导航组件。不要将role属性添加到<ul>上.

3、标签页.nav-tabs

4、胶囊式标签页.nav-pills垂直方向添加.nav-stacked

5、两端对齐的标签页.nav-justified

导航条.navbar

1、表单.navbar-form和.form-inline

2、按妞:对于不包含在中的<button>元素,加上.navbar-btn后,可以让它在导航条里垂直居中

4、文本:.navbar-text通常使用<p>标签

5、非导航的链接:.navbar-link

6、组件排列:.navbar-left和.navbar-right工具类让导航链接、表单、按钮或文本对齐

7、固定在顶部:.navbar-fixed-top类可以让导航条固定在顶部,还可包含一个.container或.container-fluid容器,从而让导航条居中(需要为body元素设置内补(padding)body { padding-top: 70px; })

固定在底部:.navbar-fixed-bottom(body{padding-bottom:70px;})

静止在顶部:.navbar-static-top(不用给body添加内补)

8、反色的导航条:.navbar-inverse

9、路径导航:.breadcrumb

10、分页

<nav aria-label="Page navigation">>ul.pagination>li>a aria-label="Previous|Next"

11、标签span.label 

徽章span.badge

巨幕div.jumbotrom

12、缩略图div.row>div.col-sm-6>div.thumbnail>img+div.caption>h3+p

13、警告框div.alert  role="alert">button.close data-dismiss="alert" aria-label="Close">span aria-hidden="true"

14、进度条

div.progress>div.progress-bar role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;/min-widht:2em">span.sr-only

情境.progress-bar-success...、条纹.progress-bar-striped、动画效果.active、堆叠效果

15、媒体对象

div.media>

                .div.media-left>a>img.media-object

                .div.media-body>h4.media-heading

16、媒体对象列表

ul.media-list>li.media>

                                      div.media-left>a>img.media-object

                                     div.media-body>h4.media-heading

17、列表组

ul.list-group>li.list-group-item

18、徽章

ul.list-group>li.list-group-item>span.badge

19、链接ul改div li改a类不变

按钮ul改div li改button类不变(不要使用标准的.btn类)

20、情境类list-group-item-success

21、定制内容

div.list-group>a.list-group-item>h4.list-item-heading+p.list-group-text


面板

.panel>panel-heading+.panel-body+.panel-footer


具有响应式特性的嵌入内容

直接应用在<iframe>、<embed>、<video>和<object>元素上,果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的.embed-responsive-item类

不需要为<iframe>元素设置frameborder="0"属性

div.embed-response.embed-responsive-16by9">iframe.embed-responsive-item src="..."



JavaScript 插件



//文档结构简写(复制到sublime或webstorm中再去掉一些属性,按tab键可直接生成HTML代码)

//modal.js

button.btn.btn-primary data-toggle="modal" data-target="#"

div.modal.fade role="dialog">.modal-dialog role="document">.modal-content>.modal-header+.modal-body+.modal-footer

$('#example').on('show.bs.modal', function(event) {

var button = $(event.relatedTarget);

var recipient = button.data('whatever');

var modal = $(this);

modal.find('modal-title').text('new message to:' + recipient);

modal.find('modal-body input').val(recipient);

});

//dropdown.js

div.dropdown>button data-toggle="dropdown"+ul.dropdown-menu

//tab.js

div>(ul.nav.nav-tabs role="tablist">li role="presentation">a data-toggle="tab" role="tab")+(div.tab-content>div.tab-pane role="tabpanel")

//tooltip.js

button data-toggle="tooltip" data-placement="left" title="tooltip on left"

div.tooltip.top role="tooltip">div.tooltip-arrow+div.tooltip-inner

//popover.js

button data-toggle="popover" title="popover title" data-content="content"

//button.js

button data-toggle="button"

div.btn-group data-toggle="buttons"

//collapse.js

a data-toggle="collapse" href="#"|button data-toggle="collapse" data-target="#"

div.collapse#

div.panel-group#parent role="tablist">div.panel.panel-default>(div.panel-heading role="tab">h4.panel-title>a data-toggle="collapse" data-parent="#parent" href="#One" aria-controls="#One")+(div#One.panel-collapse.collapse role="tabpanel">div.panel-body)

//carousel.js

div#example.carousel.slide data-ride="carousel">(ol.carousel-indicators>li data-target="#example" data-slide-to="index")+(div.carousel-inner role="listbox">div.item>(img+div.carousel-caption))+(a.left.carousel-control href="#example" role="button" data-slide="prev">span)


data属性(部分)


data-toggle="{

modul,

dropdown,

tab,

tooltip,

popover,

button,

buttons,

collapse

}"


modal:

data-{

backdrop,

keyboard,

show,

remote

}


scroll:

data-spy


popover:

data-{

animation,

container,

content,

delay,

html,

placement,

selector,

template,

title,

trigger,

viewport

}


alert:

data-dismiss="alert"


collapse:

data-{

parent,

toggle

}


carousel:

data-{

interval,

pause,

wrap,

keyboard

}

2015-11-27 10:45:34 ghostyusheng 阅读数 301

class = "list-unstyled";

class = "list-inline";

在Bootstrap主要提供了三种代码风格
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来:
1、LESS版本,请查阅code.less文件
2、Sass版本,请查阅_code.scss文件

表格

表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用。

  ☑  .table:基础表格

  ☑  .table-striped:斑马线表格

  ☑  .table-bordered:带边框的表格

  ☑  .table-hover:鼠标悬停高亮的表格

  ☑  .table-condensed:紧凑型表格

  ☑  .table-responsive:响应式表格


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

<input type="email" class="form-control"  placeholder="请输入您的邮箱地址">


<form>元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”


在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>


2016-03-26 10:11:26 c__333 阅读数 2051

Bootstrap官网:可以下载最新版本的bootstrap框架,源码。或者直接使用bootstrap官方提供的CDN链接,在页面中引用官方CDN的路径即可。

Bootstrap中的JS插件依赖于jQuery,因此jQuery要在bootstrap之前引用。

基本的HTML模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

全局样式

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

标题

在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。

eg.

<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

在一个标题后面紧跟着一行小的副标题。在Bootstrap中,使用了<small>标签来制作副标题。

eg.

<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>

强调内容

如果想让一个段落p突出显示,可以通过添加类名“.lead”实现。

eg.

<p>我是一个普通的段落,我不需要强调显示</p>
<p class="lead">这部分内容需要特别的强调,我和别人长得不一样</p>

除此之外,Bootstrap还通过元素标签:<small><strong><em><cite>给文本做突出样式处理。

粗体

在Bootstrap中,可以使用<b><strong>标签让文本直接加粗。

eg.

<p>我在学习<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知识。</p>

斜体

在Bootstrap中通过使用标签<em><i>来实现斜体。

eg.

<p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i></p>

强调相关的类

Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

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

eg.

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

文本对齐风格

Bootstrap通过定义四个类名来控制文本的对齐风格:

  • .text-left:左对齐
  • .text-center:居中对齐
  • .text-right:右对齐
  • .text-justify:两端对齐

特别声明:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。

eg.

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>

列表

无序列表有序列表使用方式和我们平时使用的一样(无序列表使用ul,有序列表使用ol标签),在样式方面,Bootstrap只是在此基础上做了一些细微的优化。

eg.

<ul>
    <li>列表项目</li>
    <li>列表项目</li>
    <li>列表项目</li>
    <li>列表项目</li>
    <li>列表项目</li>
</ul>

<ol>
      <li>项目列表一</li>
      <li>项目列表二</li>
      <li>项目列表三</li>
</ol>

列表嵌套
eg.

<ol>
    <li>有序列表</li>
    <li>
    有序列表
        <ol>
        <li>有序列表(2)</li>
        <li>有序列表(2)</li>
        </ol>
    </li>
    <li>有序列表</li>
</ol>

去点列表
Bootstrap通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
eg.

<!--无序列表去点-->
<ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
</ul>

<!--有序列表去序号-->
 <ol class="list-unstyled">
        <li>不带项目编号</li>
        <li>不带项目编号</li>
</ol>

内联列表
Bootstrap通过添加类名“.list-inline”来实现内联列表,就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。
eg.

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

定义列表
eg.

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl>

水平定义列表
Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。
eg.

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>
    <dt>慕课网</dt>
    <dd>一个专业的,真心实意在做培训的网站</dd>
    <dt>我来测试一个标题,我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>

代码

在Bootstrap主要提供了三种代码风格:

  • 使用<code></code>来显示单行内联代码
  • 使用<pre></pre>来显示多行块代码
  • 使用<kbd></kbd>来显示用户输入代码

    eg.

code风格:
<div>Bootstrap的代码风格有三种:<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>
pre风格:
<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
kbd风格:
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“&lt;”来替代,大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议在编写HTML标签时,就控制好。

只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
只需要添加对应的类名就可以得到不同的表格风格。

  • .table:基础表格
  • .table-striped:斑马线表格
  • .table-bordered:带边框的表格
  • .table-hover:鼠标悬停高亮的表格
  • .table-condensed:紧凑型表格
  • .table-responsive:响应式表格
    eg.
<table class="table">
</table>
  1. 表格行的类
    Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色。

    如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。

  2. 基础表格

  3. 斑马线表格

  4. 带边框的表格

  5. 鼠标悬浮高亮的表格

<table class="table table-hover">
  • 紧凑型表格
<table class="table table-condensed">
…
</table>

在使用Bootstrap表格时,千万注意,<table>元素中一定不能缺少类名“table”。

  • 响应式表格
<div class="table-responsive">
<table class="table table-bordered"></table>
</div>

基础表单

在Bootstrap框架中,通过定制了一个类名.form-control
eg.

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">

水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

内联表单

只需要在<form>元素中添加类名“form-inline”即可。

如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。

<body>
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">进入邮箱</button>
</form>  
</body>

在label标签运用一个类名“sr-only”,这个样式将标签隐藏。

表单控件(输入框input)

为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

<input type="email" class="form-control" placeholder="Enter email">

表单控件(下拉选择框select)

body>
<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">
      <select multiple class="form-control"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
      </select>
  </div>

</form>   
</body>

表单控件(文本域textarea)

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>    

表单控件(复选框checkbox和单选择按钮radio)

<body>
<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>     
</body>

表单控件(复选框和单选按钮水平排列)

1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

表单控件(按钮)

在Bootstrap框架中的按钮都是采用<button>来实现。

表单控件大小

Bootstrap框架提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件

<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">

不管是“input-sm”还是“input-lg”仅对控件高度做了处理。但往往很多时候,我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。

表单控件状态(焦点状态)

要让控件在焦点状态下有样式效果,需要给控件添加类名“form-control”

表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。

<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

<form role="form">
<fieldset disabled>
  <div class="form-group">
  <label for="disabledTextInput">禁用的输入框</label>
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
  </div>
  <div class="form-group">
  <label for="disabledSelect">禁用的下拉框</label>
    <select id="disabledSelect" class="form-control">
  <option>不可选择</option>
  </select>
  </div>
  <div class="checkbox">
  <label>
    <input type="checkbox">无法选择
  </label>
  </div>
  <button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>

对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend></fieldset>
</form>

表单控件状态(验证状态)

1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>

三种状态下效果都是一样的,只是颜色不一样而以。

很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  ......
</div>
<div class="form-group has-error has-feedback">
  ......
</div>
</form>

而且必须在表单中添加一个 span 元素:

<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>

表单提示信息

平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部。

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div></form>


在Bootstrap V2.x版本中还提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。

基本按钮

<button class="btn" type="button">我是一个基本按钮</button>

默认按钮

<button class="btn btn-default" type="button">默认按钮</button>

多标签支持

唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

强烈建议使用button或a标签来制作按钮。

定制风格

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

按钮大小

类似于input一样,通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

块状按钮

Bootstrap框架中提供了一个类名“btn-block”,按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。

只需要在原按钮类名上添加“.btn-block”类名,当然“.btn”类名是不可或缺的。

按钮状态——活动状态

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。

按钮状态——禁用状态

方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”

在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>

图像

1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

对于圆角图片和圆形图片效果,对于IE8以及其以下版本不支持。

图标

在任何内联元素上应用所对应的样式即可:

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

所有icon都是以”glyphicon-”前缀的类名开始,然后后缀表示图标的名称。

所有名称查看

网格系统

  • 实现原理
    Bootstrap框架中的网格系统就是将容器平分成12份。

  • 工作原理
    1、数据行(.row)必须包含在容器(.container)中
    2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。
    3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>

基本用法

列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
 </div>
</div>

列偏移

只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。
例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>

注意:使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示

列排序

列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
</div>

“col-md-4”居左,“col-md-8”居右,如果要互换位置,需要将“col-md-4”向右移动8个列的距离,也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”,调用其样式。
也要将“col-md-8”向左移动4个列的距离,也就是4个offset,在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”。

列的嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。

<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的里面嵌套了一个网格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    我的里面嵌套了一个网格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>

嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

下拉菜单(基本用法)

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。
因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

使用方法

  • 使用一个名为“dropdown”的容器包裹整个下拉菜单元素
<div class="dropdown"></div>
  • 使用一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致
data-toggle="dropdown"
  • 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”
<ul class="dropdown-menu">

Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的

下拉菜单(下拉分隔线)

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

下拉菜单(菜单标题)

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

下拉菜单(对齐方式)

Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"></ul>
</div>

下拉菜单(菜单项状态)

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)

当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

按钮(按钮组)

按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button><button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>

除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”。

按钮(按钮工具栏)

在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组。
Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中。

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

按钮是通过btn-lg、btn-sm和btn-xs三个类名来改变按钮大小,。那么按钮组的大小,我们也可以通过类似的方法:
☑ .btn-group-lg:大按钮组

☑ .btn-group-sm:小按钮组

☑ .btn-group-xs:超小按钮组

只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组。

<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group btn-group-sm">
    …
  </div>
  <div class="btn-group btn-group-xs">
   …
  </div>
</div>

按钮(嵌套分组)

我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。

使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。

<div class="btn-group">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
   <ul class="dropdown-menu">
         <li><a href="##">公司简介</a></li>
         <li><a href="##">企业文化</a></li>
         <li><a href="##">组织结构</a></li>
         <li><a href="##">客服服务</a></li>
    </ul>
</div>
</div>

按钮(垂直分组)

我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首页</button>
<button class="btnbtn-default" type="button">产品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">联系我们</button>
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
   <ul class="dropdown-menu">
      <li><a href="##">公司简介</a></li>
      <li><a href="##">企业文化</a></li>
      <li><a href="##">组织结构</a></li>
      <li><a href="##">客服服务</a></li>
</ul>
</div>
</div>

按钮(等分按钮)

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器宽度。
只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名。

<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首页</a>
  <a class="btnbtn-default" href="#">产品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">联系我们</a>
</div>
</div>


在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。

按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
      </ul>
</div>

按钮的向下向上三角形

按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret”:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

有的时候我们的下拉菜单会向上弹起,这个时候我们的三角方向需要朝上显示,需要在“.btn-group”类上追加“dropup”类名。

<div class="btn-group dropup">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
  <ul class="dropdown-menu">
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
        <li><a href="##">按钮下拉菜单项</a></li>
  </ul>
</div>

向上弹起的下拉菜单

只需要在“btn-group”上添加类名“dropup”。
如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>

导航(基础样式)

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。

<ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
    <li><a href="##">Responsive</a></li>
</ul>

导航(标签形tab导航)

在很多内容分块显示的时,使用这种选项卡来分组十分适合。
标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名。

<ul class="nav nav-tabs">
     <li><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>


一般情况之下,选项中会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class=”active””即可:

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li></ul>

除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class=”disabled””即可:

<ul class="nav nav-tabs">
     <li class="active"><a href="##">Home</a></li><li class="disabled"><a href="##">Responsive</a></li>
</ul>

导航(胶囊形(pills)导航)

其实现方法和“nav-tabs”类似,同样的结构,只需要把类名“nav-tabs”换成“nav-pills”即可:

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>

导航(垂直堆叠的导航)

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可:

<ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

分隔线只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可:

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
   <li class="nav-divider"></li>
    <li class="disabled"><a href="##">Responsive</a></li>
</ul>

自适应导航(使用)

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。但是更换了另一个类名“nav-justified”。
需要和“nav-tabs”或者“nav-pills”配合在一起使用。

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>


自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候,将会按下图的风格展示:

导航加下拉菜单(二级导航)

只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以:

<ul class="nav nav-pills">
     <li class="active"><a href="##">首页</a></li>
     <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li></ul>
     </li>
     <li><a href="##">关于我们</a></li>
</ul>


只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以用分隔线了。

面包屑式导航

面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)。
为ol加入breadcrumb类:

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

基础导航条

在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。

第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

为导航条添加标题、二级菜单及状态

  • 加入导航条标题
    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其 它文字稍大一些)。通过“navbar-header”和“navbar-brand”来实现
<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">慕课网</a>
   </div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">网站首页</a></li>
       <li><a href="##">系列教程</a></li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
     </ul>
</div>
  • 导航条菜单、二级菜单
<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">慕课网</a>
   </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
    </ul>
</div>

带表单的导航条

有的导航条中会带有搜索表单。

在navbar容器中放置一个带有navbar-form类名的表单。

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">慕课网</a>
   </div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">网站首页</a></li>
       <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
      </li>
      <li><a href="##">名师介绍</a></li>
      <li><a href="##">成功案例</a></li>
      <li><a href="##">关于我们</a></li>
     </ul>
     <form action="##" class="navbar-form navbar-left" rol="search">
        <div class="form-group">
           <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
     </form>
</div>

导航条中的按钮、文本和链接 ##

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。

  • 导航条中的按钮navbar-btn
  • 导航条中的文本navbar-text
  • 导航条中的普通链接navbar-link

这三种样式需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
     <a href="##" class="navbar-brand">慕课网</a>
 </div>
  <div class="nav navbar-nav">
      <a href="##" class="navbar-text">Navbar Text</a>
      <a href="##" class="navbar-text">Navbar Text</a>
      <a href="##" class="navbar-text">Navbar Text</a>
  </div>
</div>

固定导航条

这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式:

  • .navbar-fixed-top:导航条固定在浏览器窗口顶部
  • .navbar-fixed-bottom:导航条固定在浏览器窗口底部

只需要在制作导航条最外部容器navbar上追加对应的类名即可:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 …
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 …
</div>

(有bug)

响应式导航条

使用方法:

  • 保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
  • 保证在窄屏时要显示的图标样式(固定写法):
<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
  • 并为button添加data-target=”.类名/#id名”,究竞是类名还是id名呢?由需要折叠的div来决定。如:
    需要折叠的div代码段:
<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段:

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也可以这么写,需要折叠的div代码段:

<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav"></ul>
</div>

窄屏时要显示的图标:

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

反色导航条

与默认的导航条相比,使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

<div class="navbar  navbar-inverse" role="navigation">
<div class="nav bar-header">
      <a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
      <li class="active"><a href="">首页</a></li>
      <li><a href="">教程</a></li>
      <li><a href="">关于我们</a></li>
</ul>
</div>

分页导航(带页码的分页导航)

在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法:

<ul class="pagination">
  <li><a href="#">&laquo;第一页</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul> 

  • 通过“pagination-lg”让分页导航变大
  • 通过“pagination-sm”让分页导航变小
<ul class="pagination pagination-lg"></ul>
<ul class="pagination"></ul>
<ul class="pagination pagination-sm"></ul>

分页导航(翻页分页导航)

这种分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。
在实际使用中,为ul标签加入pager类:

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式:

  • previous:让“上一步”按钮居左
  • next:让“下一步”按钮居右
<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>
   <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

和带页码分页导航一样,如果在li标签上添加了disabled类名的时候,分页按钮处于禁用状态,但同样不能禁止其点击功能。可以通过js来处理,或将a标签换成span标签。

<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>

标签


可以使用span这样的行内标签:

<h3>Example heading <span class="label label-default">New</span></h3>

和按钮元素button类似,label样式也提供了多种颜色:

  • label-deafult:默认标签,深灰色
  • label-primary:主要标签,深蓝色
  • label-success:成功标签,绿色
  • label-info:信息标签,浅蓝色
  • label-warning:警告标签,橙色
  • label-danger:错误标签,红色

徽章

常出现的是一些系统发出的信息,比如你登录你的twitter后,如果你信息没有看,系统会告诉你有多少信息未读:

使用span标签来制作,然后为他加入badge类:

<a href="#">Inbox <span class="badge">42</span></a>

可以将徽章与按钮或者导航之类配合使用。在徽章组件中没有提供多种颜色风格的效果。

缩略图

通过“thumbnail”样式配合bootstrap的网格系统来实现。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
        </div>
    …
    </div>
</div>

上面的结构表示的是在宽屏幕(可视区域大于768px)的时候,一行显示四个缩略图

在窄屏(可视区域小于768px)的时候,一行只显示两个缩略图

还可以让缩略图配合标题、描述内容,按钮等:

在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </div>
        </div></div>
</div>

警示框

告诉用户操作成功、操作错误、提示或者警告等。

在默认情况之下,提供了四种不同的警示框效果:

  • 成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;
  • 信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;
  • 警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;
  • 错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。

只需要在“alert”基础上追加对应的类名:

<div class="alert alert-success" role="alert">恭喜您操作成功!</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>

可关闭的警示框

  1. 需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
  2. 在button标签中加入class=”close”类,实现警示框关闭按钮的样式。
  3. 要确保关闭按钮元素上设置了自定义属性:“data-dismiss=”alert””
<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功!
</div>

警示框的链接
在警示框中加入链接地址:给警示框加的链接添加一个名为“alert-link”的类名。

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
    .
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong>
     This 
     <a href="#" class="alert-link">alert needs your attention</a>
     , but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong>
     Better check yourself, you're 
     <a href="#" class="alert-link">not looking too good</a>
     .
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong>
    <a href="#" class="alert-link">Change a few things up</a>
     and try submitting again.
</div>

进度条

提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度:

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

我们可以将结构做得更好些(语义化更友好些):

<div class="progress">
    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">40% Complete</span>
    </div>
</div>

1、role属性作用:告诉搜索引擎这个div的作用是进度条。

2、aria-valuenow=”40”属性作用:当前进度条的进度为40%。

3、aria-valuemin=”0”属性作用:进度条的最小值为0%。

4、aria-valuemax=”100”属性作用:进度条的最大值为100%。

彩色进度条

  • progress-bar-info:表示信息进度条,进度条颜色为蓝色
  • progress-bar-success:表示成功进度条,进度条颜色为绿色
  • progress-bar-warning:表示警告进度条,进度条颜色为黄色
  • progress-bar-danger:表示错误进度条,进度条颜色为红色

只需要在基础的进度上增加对应的类名:

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

条纹进度条

只需要在进度条的容器“progress”基础上增加类名“progress-striped”:

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

动态条纹进度条

在进度条“progress progress-striped”两个类的基础上再加入“active”类名:

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

层叠进度条

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>


除了层叠彩色进度条之外,还可以层叠条纹进度条

带Label的进度条

只需要在进度条中添加你需要的值:

<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

媒体对象

在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列:

媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分:

  • 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
  • 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片
  • 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
  • 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选

使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">系列:十天精通CSS3</h4>
        <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
    </div>
</div>

媒体对象的嵌套


这里有三个媒体对象,只不过是一个嵌套在另一个的里面。

在Bootstrap框架中,只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”:

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="…" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media Heading</h4>
        <div></div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="…" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Heading</h4>
                <div></div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="…" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media Heading</h4>
                        <div>...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

媒体对象列表


在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”:

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div></div>
        </div>
    </li>
    <li class="media"></li>
    <li class="media"></li>
</ul>

基础列表组

<ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
    <li class="list-group-item">CSS3边框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>

带徽章的列表组

就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。只需要在“list-group-item”中添加徽章组件“badge”:

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">
        <span class="badge">456</span>CSS3选择器
    </li>
    <li class="list-group-item">
        <span class="badge">892</span>CSS3边框
    </li>
    <li class="list-group-item">
        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">
        <span class="badge">1290</span>CSS3文本
    </li>
</ul>

带链接的列表组

<ul class="list-group">
    <li class="list-group-item">
        <a href="##">揭开CSS3的面</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3选择器</a>
    </li>
    ...
</ul>

这样做,链接的点击区域只在文本上有效。

在列表项的任何区域都具备可点击:

<div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>

自定义列表组

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

列表项的状态设置

  • active:表示当前状态
  • disabled:表示禁用状态
<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>

多彩列表组

  • list-group-item-success:成功,背景色绿色
  • list-group-item-info:信息,背景色蓝色
  • list-group-item-warning:警告,背景色为黄色
  • list-group-item-danger:错误,背景色为红色

    只需要在“list-group-item”基础上增加对应的类名:

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

基础面板

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
</div>

带有头和尾的面板

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者:大漠</div>
</div>

彩色面板

  • panel-primary:重点蓝
  • panel-success:成功绿
  • panel-info:信息蓝
  • panel-warning:警告黄
  • panel-danger:危险红

只需要在panel的类名基础上增加自己需要的类名:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者:大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>

面板中嵌套表格

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
    <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </p>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>我的书</th>
                <th>发布时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="panel-footer">作者:大漠</div>
</div>

表格和面板边缘不需要有任何的间距:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <table class="table table-bordered">…</table>
    <div class="panel-footer">作者:大漠</div>
</div>

面板中嵌套列表组

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
    </div>
    <div class="panel-footer">作者:大漠</div>
</div>

去除间距:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body"></div>
    <ul class="list-group">
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者:大漠</div>
</div>

导入JavaScript插件

一次性导入:

<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有BootstrapJavaScript插件(压缩版本) -->
<script src="js/bootstrap.min.js"></script>

单独导入:
☑ 动画过渡(Transitions):对应的插件文件“transition.js”

☑ 模态弹窗(Modal):对应的插件文件“modal.js”

☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js”

☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”

☑ 选项卡(Tab):对应的插件文件“tab.js”

☑ 提示框(Tooltips):对应的插件文件“tooltop.js”

☑ 弹出框(Popover):对应的插件文件“popover.js”

☑ 警告框(Alert):对应的插件文件“alert.js”

☑ 按钮(Buttons):对应的插件文件“button.js”

☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js”

☑ 图片轮播Carousel:对应的插件文件“carousel.js”

☑ 自动定位浮标Affix:对应的插件文件“affix.js”

可到github去下载

动画过渡

Bootstrap框架中以下组件使用了过渡动画效果:

☑ 模态弹出窗(Modal)的滑动和渐变效果;

☑ 选项卡(Tab)的渐变效果;

☑ 警告框(Alert)的渐变效果;

☑ 图片轮播(Carousel)的滑动效果。

模态弹出框

这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片。

  • 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮
  • 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容
  • 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

模态弹出窗宽度是自适应的,而且modal-dialog水平居中。

Bootstrap框架为模态弹出窗提供了不同尺寸,一个是大尺寸样式“modal-lg”,另一个是小尺寸样式“modal-sm”。其结构上稍做调整:

<!-- 大尺寸模态弹出窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <divclass="modal-dialog modal-lg">
       <divclass="modal-content"> ... </div>
    </div>
</div>
<!-- 小尺寸模态弹出窗 -->
<divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <divclass="modal-dialog modal-sm">
       <divclass="modal-content"> ... </div>
    </div>
</div>

模态弹出窗在页面加载完成时,是被隐藏在页面中的,只有通过一定的动作(事件)才能触发模态弹出窗的显示。

方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle=”” 或者 data-dismiss=”“):

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

方法二:触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性:

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模态弹出窗内容 -->
        </div>
    </div>
</div>

建议还是使用统一使用data-target的方式来触发。

可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果:

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗:

JavaScript触发方法
通过给一个元素一个事件,来触发。比如说给一个按钮一个单击事件,然后触发模态弹出窗:

<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript触发的弹出窗代码:

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

使用JavaScript触发模态弹出窗时,Bootstrap框架提供了一些设置,主要包括属性设置、参数设置和事件设置:
属性设置

比如你不想让用户按ESC键关闭模态弹出窗,你就可以这样做:

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

参数设置:

事件设置:

调用方法:

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

bootstrap笔记

阅读数 4

1、图片自适应加类名;img-responsive;2、按钮自适应加类名:btn-block;3、bootstrap布局(1)所有的内容部分都应该放到container的容器中(2)宽度自适应父盒子用row类名标识(3)并列的部分col-xs-xx(手机)col-md-xx(笔记本)标识转载于:https://www.jianshu...

博文 来自: weixin_33881041

Bootstrap笔记

阅读数 19

排版相关**1、强调**p用.lead或者em,i强调类名.text-muted:提示,使用浅灰色(#999).text-primary:主要,使用蓝色(#428bca).text-success:成功,使用浅绿色(#3c763d).text-info:通知信息,使用浅蓝色(#31708f).text-warning:警...

博文 来自: weixin_33957648

Bootstrap笔记

阅读数 172

Bootstrap笔记.css样式背景:bg-dangerbg-primarybg-infobg-successbg-warning文字:text-danger文字对齐方式:text-center/right/left浮动:pull-right/left清除浮动clearfix透明度:in显示/隐藏:showhide弹出框模态框固定定位:

博文 来自: Girl_0919

bootstrap笔记

阅读数 222

data-dismiss="modal"  代表:data-dismiss是一个定制的HTML5data属性。用于关闭模态窗口。ata-toggle="modal"     代表:HTML5定制的data属性data-toggle,用于打开模态窗口。data-backdrop="static" 放在模态框的首个div用于禁止模态框出现后点击阴影消

博文 来自: Tzz_Ricordo

bootstrap笔记

阅读数 16

1、定位居上不下:class="fixed-top"2、在做导航条时,不需要《divclass=“row”》《/div>》只要《divclass=“container”》即可。3、做响应式导航条,必须要有:bootstrap.css、jquery和bootstrap.js4、在做响应式导航条时,外部样式和js的排列顺序应该是:bootstrap.css——》jque...

博文 来自: weiwei266
没有更多推荐了,返回首页