首页 > 代码库 > 一:bootstrap排版
一:bootstrap排版
标题:
段落正文
1、全局文本字号为14px(font-size)。
2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。
3、颜色为深灰色(#333);
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family)
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
强调内容(.lead)
<small>标签
1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。
2、由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;
<strong><b>标签
<em><i>标签
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
强调相关的类
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(#a94442)
文本对齐风格
Bootstrap通过定义四个类名来控制文本的对齐风格:
? .text-left:左对齐
? .text-center:居中对齐
? .text-right:右对齐
? .text-justify:两端对齐
列表
去点(.list-unstyled) 除了项目编号之外,还讲列表左边距清0
内联 (.list-inline) 把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。
水平(.dl-horizontal)
1、将dt设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号
@media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } }
定义
<dl> <dt>…</dt> <dd>…</dd> </dl>
表格
Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:
? .table:基础表格
? .table-striped:斑马线表格
? .table-bordered:带边框的表格
? .table-hover:鼠标悬停高亮的表格
? .table-condensed:紧凑型表格
? .table-responsive:响应式表格
特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。
斑马线表格
<table class="table table-striped">
带边框的表格
<table class="table table-bordered">
鼠标悬停高亮表格
<table class="table table-hover">
紧凑型表格
<table class="table table-condensed">
响应式表格
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:
<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>
一:bootstrap排版