前端Bootstrap笔记（二）

一.按钮式下拉菜单的使用
<!-- 使用一个名为dropdown的容器包裹整个下拉菜单元素 -->
<!-- dropdown按钮的方向是向下的，dropup按钮的方向向上 -->
<div class="dropdown">
<!-- 使用了一个<button>按钮做为父菜单，并且定义类名dropdown-toggle和自定义data-toggle属性，且值必须和最外容器类名一致 -->
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单的名字
<span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个ul列表，并且定义类名为dropdown-menu，Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在dropdown-menu上添加一个dropdown-menu-right类名，右对齐是dropdown-menu-left -->
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<!-- 为了让下拉菜单分组更明显，还可以给每个组添加一个头部（标题） -->
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<!-- 下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus），设置该项为当前状态，在li标签里面加上类名.active -->
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<!-- 下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能 -->
<li role="presentation" class="divider"></li>
<!-- 设置该项为当前状态，在li标签里面加上类名.disable -->
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<!-- 下拉菜单原理分析
.dropdown-menu {
position: absolute;/设置绝对定位，相对于父元素div.dropdown/
top: 100%;/让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素/
left: 0;
z-index: 1000;/让下拉菜单项不被其他元素遮盖住/
display: none;/默认隐藏下拉菜单项/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
} -->

二.按钮组的使用
<!-- 除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角 -->
<div class="btn-group">
<!-- 使用一个名为“btn-group”的容器，把多个按钮放到这个容器中 -->
<!-- 除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，.btn-group容器里的标签元素需要带有类名.btn -->
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

三.按钮工具栏
<!-- 在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组 -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>

四.按钮嵌套分组
<!-- 把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果 -->
<!-- 默认按钮组是水平显示的，如果垂直显示的，把最外边的btn-group改为btn-group-vertical即可 -->
<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<!-- 使用的时候，只需要把当初制作下拉菜单的dropdown的容器换成btn-group，并且和普通的按钮放在同一级，在外面加上一个div的按钮组类包裹起来，在一个下拉列表 -->
<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>
</div>

五.等分按钮，自适应分组按钮，也即是说按钮大小会随着屏幕大小而改变
<div class="btn-wrap">
<!-- 需要在按钮组btn-group上追加一个btn-group-justified类名 -->
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">首页</a>
<a class="btn btn-default" href="#">产品展示</a>
<a class="btn btn-default" href="#">案例分析</a>
<a class="btn btn-default" href="#">联系我们</a>
</div>
</div>

六.导航的基础样式
<!-- Bootstrap框架中制作导航条主要通过.nav样式。默认的.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类 -->
普通的标签页导航
<ul class="nav nav-tabs" role="tablist">
<!-- 设置当前项，可以加一个在li标签里面加上一个active类名 -->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页导航
<ul class="nav nav-pills" role="tablist">
<!-- 上面这样写是水平导航,如果想垂直导航,需要在外面的ul里面nav-pills后面加上nav-stacked -->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li class="nav-divider"></li><!-- 分割线 -->
<li role="presentation" class="disabled"><a href="#">Messages</a></li>
</ul>
面包屑式导航
<!-- 可以用来告诉用户当前页面所处的位置，低版本的IE不支持这个 -->
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>
自适应导航
<!-- 菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“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>
导航加下拉菜单（二级导航）
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<!-- 需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul -->
<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>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>

七.导航条
<!-- 整个导航条的内容要放在一个nav或者div的容器里面，并使用类名navbar -->
<!-- 添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，（但此时应注意给body加上上下padding的值，便于右顶部导航条和底部导航条设置时，导航条不会遮住页面的内容）从而让导航条居中，并在两侧添加内部（padding），导航条默认的颜色是淡灰色，如果想要黑色的，只需要加上类名.navbar-inverse -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 图标logo和导航切换键更好的适应手机小屏幕 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- 下面这行代码是适合盲人使用屏幕阅读器使用的 -->
<span class="sr-only">导航切换</span>
<!-- 下面是一个显示为三行的收纳小图标 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand也可以是一张logo图片，使用时只需要在a标签里面嵌套一个img标签即可 -->
<!-- 放在navbar-header里面，确保无论是屏宽还是窄屏，Brand都显示 -->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<!-- 导航上面的子链接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- 下面就是导航栏上的内容，放在一个列表里面，ul标签用navbar-nav类名 -->
<ul class="nav navbar-nav">
li里面的链接数量
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- 下面是一个搜索框组件 -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<!-- 下面又是一个页面右边的导航菜单 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

八.分页导航
1.带页码的分页导航
<!-- 可以通过加上类名pagination-lg（变大），pagination-sm（变小） -->
<ul class="pagination">
<li><a href="#">«第一页</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="#">最后一页»</a></li>
</ul>
2.翻页导航
<nav>
<ul class="pager"><!-- ←代表左右箭头 -->
<!-- 如果不给li标签加上类名.previous和.next，则翻页导航默认居中显示，加上这两个类名后，一个居左，一个居右 -->
<li class="previous"><a href="#">←上一页</a></li>
<li class="next"><a href="#">下一页→</a></li>
</ul>
</nav>

九.标签和徽章
适合告诉用户一些额外的信息
<h3>标签演示<span class="label label-default">New</span></h3>
各个标签的颜色不一样
<span class="label label-default">默认标签，深灰色</span>
<span class="label label-primary">主要标签，深蓝色</span>
<span class="label label-success">成功标签，绿色</span>
<span class="label label-info">信息标签，浅蓝色</span>
<span class="label label-warning">警告标签，橙色</span>
<span class="label label-danger">错误标签，深红色</span>

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>

十.缩略图
<!-- 缩略图的默认设计仅需最少的标签就能展示带链接的图片，还可以让缩略图配合标题、描述内容，按钮等 -->
<div class="row">
<div class="col-sm-6 col-md-4">
<!-- 增加一个thumbnail类名 -->
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<!-- 在caption容器里面放置其他内容 -->
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

十一.警示框
<!-- 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息 -->
1.默认警示框
<!-- 成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色 -->
<div class="alert alert-success" role="alert">...</div>
<!-- 信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色 -->
<div class="alert alert-info" role="alert">...</div>
<!-- 警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色 -->
<div class="alert alert-warning" role="alert">...</div>
<!-- 错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色 -->
<div class="alert alert-danger" role="alert">...</div>
2.可关闭的警告框
<!-- 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<!-- 2、在button标签中加入class="close"类，实现警示框关闭按钮的样式 -->
<!-- 3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭） -->
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- 警告框中的内容 -->
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
3.警告框中的链接
<div class="alert alert-success" role="alert">
<!-- 加上一个alert-link的类名，有链接的内容放在a标签里面 -->
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>