标题
Bootstrap标题样式进行了以下显著的优化重置:
-
重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px;h4~h6重置后的值都是10px。
-
所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。
-
固定不同级别标题字体大小:h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。small:font-size: 65%;
段落
-
强调
.text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442) 复制代码
-
文本对齐
.text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 复制代码
代码
<code></code>//单行内联代码
<pre></pre>//多行块代码
# 注pre.pre-scrollable//控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
<kbd></kbd>//用户输入代码
复制代码
表格
.table//基础表格
.table-striped//斑马线表格
.table-bordered//带边框的表格
.table-hover//鼠标悬停高亮的表格
.table-condensed//紧凑型表格
.table-responsive//响应式表格
复制代码
表单
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1 在
<form>
元素是使用类名“form-horizontal
”。
2 配合Bootstrap框架的网格系统。
form
form class="form-horizontal" role="form">
复制代码
form-group
<div class="form-group">
复制代码
col-sm-*
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
复制代码
form-control
<input type="email" class="form-control" placeholder="用户名">
复制代码
常用组合
form.form-inline>div.form-group>label.col-sm-xx>input.form-control
form[role='form']>div.form-group>select.form-control
form[role='form']>div.form-group>textarea.form-control
复制代码
表单按钮
input[type=“submit”]
input[type=“button”]
input[type=“reset”]
复制代码
按钮
.btn btn-primary
.btn btn-warning
.btn btn-success
.btn btn-danger
.btn btn-info
.btn btn-link
.btn btn-inverse
复制代码
网格系统
工作原理:div.container>div.row>div.col-md-x
Bootstrap框架的网格系统工作原理如下:
-
数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)
-
在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div> </div> </div> 复制代码
-
具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素
-
通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响
菜单按钮
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 </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>
复制代码
导航
-
基础样式
ul.nav nav-tabs>li>a
-
胶囊型导航
ul.nav nav-pills>li>a
-
垂直堆叠导航
ul.nav nav-tabs nav-stacked>li>a
-
自适应导航 ul.nav nav-tabs nav-justified>li>a
-
面包屑导航
ul.breadcrumb>li>a
导航条
使用方法: 第一步:首先在制作导航的列表(
<ul class=”nav”>
)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
大概这个样子 div.nav navbar-default>ul.nav navbar-nav>li.active>a
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
</ul>
</div>
复制代码