11月22日学习内容整理：bootstrap居中处理和组件，常用组件
面包屑
第一部分、居中处理
1、水平居中
（1）使用col-xx-offset-xx 利用偏移达到居中的效果
（2）使用自定义样式：涉及到列居中时使用
.col-centered {
float: none;
margin: 0 auto;
}
（3）利用center-block ，不涉及列的居中，谁居中就写在谁上，本质上就是margin：0 auto
（4）文本类居中text-center是用来居中display：inline的元素
2、垂直居中
.vertical-align {
display: flex;
align-items: center;
}
<div style="height: 200px;border: 1px solid black" class="vertical-align">
<div style="width: 100px;height: 100px;</div>
</div>
第二部分、组件
网址：http://v3.bootcss.com/components/
一、字体图标
放在span标签内，可以改颜色
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>二、下拉菜单：看网址
1、实例
2、对齐
3、标题
4、分割线
5、禁用的菜单项
三、按钮组：看网址
1、基本实例：
2、按钮工具栏
3、尺寸
4、嵌套
5、垂直排列
6、两端对齐排列的按钮组
四、按钮式下拉菜单：看网址
1、单按钮下拉菜单
2、分裂式按钮下拉菜单
3、尺寸
4、向上弹出式菜单
五、输入框组：看网址
1、基本实例
2、尺寸
3、作为额外元素的多选框和单选框
4、作为额外元素的按钮
5、作为额外元素的按钮式下拉菜单
6、作为额外元素的分裂式按钮下拉菜单
7、多个按钮
六、页头：页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
七、警告框：看网址
1、实例
2、可关闭的警告框
3、警告框中的链接
八、Well
1、默认效果
<div class="well">...</div>
2、可选类/样式
第三部分、常用组件
一、导航：实现页面切换的
1、标签页：注意 .nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs"> <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-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">主页</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">简介</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">消息</a></li> </ul> <!--导航区结束--> <!--面板区开始--> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div> <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div> <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div> </div> <!--面板区结束-->
2、胶囊式标签页：HTML 标记相同，但使用 .nav-pills 类
<ul class="nav nav-pills"> <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>
垂直方向堆叠排列的胶囊式标签页
<div class="row"> <div class="col-md-2"> <!--导航区开始--> <ul class="nav nav-pills nav-stacked" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">主页</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">简介</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">消息</a></li> </ul> <!--导航区结束--> </div> <div class="col-10"> <!--面板区开始--> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div> <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div> <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div> </div> <!--面板区结束--> </div> </div>
3、两端对齐的标签页：在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
<ul class="nav nav-tabs nav-justified"> ... </ul> <ul class="nav nav-pills nav-justified"> ... </ul>
4、禁用的链接：对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。
<ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... </ul>
5、添加下拉菜单
<ul class="nav nav-tabs"> ... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> ... </ul> </li> ... </ul>
二、导航条
1、默认样式的导航条
使用导航条组件时，我们通常把它作为body的直接子标签（和我们的页面主体container同级）。
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
2、固定在顶部的导航条：如果使用了固定在顶部的样式，那么就需要给body设置padding，body { padding-top: 70px; }
需要为 body 元素设置内补（padding）这个固定的导航条会遮住页面上的其它内容，除非你给 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。
添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> ... </div> </nav>
3、其它的看网址
三、路径导航（也叫面包屑导航）：在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>
四、分页
1、默认分页
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
2、禁用和激活状态：比如第一页不能点上一页，最后一页不能点下一页
<nav aria-label="..."> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> </nav>
我们建议将 active 或 disabled 状态的链接（即 <a> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击。
<nav aria-label="..."> <ul class="pagination"> <li class="disabled"> <span> <span aria-hidden="true">«</span> </span> </li> <li class="active"> <span>1 <span class="sr-only">(current)</span></span> </li> ... </ul> </nav>
3、尺寸
4、翻页
两端对齐的翻页
<nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav>
五、标签
<h3>Example heading <span class="label label-default">New</span></h3>
六、徽章
<a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>
七、巨幕：就是在网页中占用空间比较大的
1、包含在container内的巨幕（左右有空白，并且是圆角）
<!--巨幕开始--> <div class="container"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> <!--巨幕结束-->
2、铺满整个屏幕的巨幕：如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。
<!--巨幕开始--> <div class="container"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> <!--巨幕结束-->
八、缩略图
1、默认样式的实例
<div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> ... </div>
2、自定义内容的
<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <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>
浙公网安备 33010602011771号