首页 > 代码库 > 一: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排版