Bootstrap是移动设备优先的,它针对移动设备的样式融合进了框架的每个角落,使得只需要通过简单的编码,便可以实现漂亮的响应式布局。
Bootstrap的全局样式采用了normalize.css,Normalize.css: Make browsers render all elements more consistently.
可以通过code.less或者_code.scss文件修改样式,然后重新编译,你就可以得到属于自己的代码样式风格。
标题
Bootstrap和普通的HTML页面一样,定义标题都是使用标签
到,只不过Bootstrap覆盖了其默认的样式,使其在所有浏览器下显示地效果一样,具体定义的规则可以如下表所示:
另外所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。
在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。与h1~h6的效果一模一样。
除此之外,我们在Web的制作中,常常会碰到一个标题后面紧跟着一行小的副标题。在Bootstrap中也考虑了这种排版效果,使用了标签来制作副标题。这个副标题具有其自己的一些独特样式:
1.行高都是1,而且font-weight设置了normal,同时颜色设置为灰色(#999)。
2.由于内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;详细代码可以参阅bootstrap.css文件中第407行~第443行。
段落
在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):
1.全局文本字号为14px(font-size),行高为1.42857143(line-height),大约是20px(通过LESS编辑器计算出来的),颜色为深灰色(#333);字体为"Helvetica Neue",Helvetica,Arical,sans-serif;(font-family),或许这样的字体对我们中文并不太合适,但在实际项目中,大家可以根据自己的需求进行重置。该设置都定义在
元素上,由于这几个属性都是继承属性,所以Web页面中文本(包括段落p元素)如无重置都会具有这些样式效果./*源码请查看bootstrap.css文件中第274行~280行*/另外在Bootstrap中,为了让段落p元素之间具有一定的间距,便于用户阅读文本,特意设置了p元素的margin值(默认情况下,p元素具有一个上下外边距(p{margin:0 0 10px;}),并且保持了一个行高的高度):/*源码请查看bootstrap.css文件中第467行~469行*/
可以根据Bootstrap提供的预编译版本LESS(或者SaSS)进行自定义排版设置。在Bootstrap中,排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量:
Less版本
@font-size-base:14px;@line-height-base:1.428571429;// 20/14
Sass版本
$font-size-base:14px !default;$line-height-base:1.428571429 !default;//20/14
第一条语句用于设置字体大小,第二条语句用于设置行高。系统默认使用这两个值产生整个页面相应的margin、padding和line-height的值。换句话说,你只需要修改这两个变量的值,然后重新编译,就可以自定义自己的Bootstrap排版样式。
强调内容
在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。
如果想让一个段落p突出显示,可以通过添加类名.“lead”实现,起作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。
".lead"对应的样式如下:/*源码查看bootstrap.css文件第470行`480行*/
.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4;}
@media(min-width:768px){/*大中型浏览器字体稍大*/ .lead{font-size:21px;}}
除此之外,Bootstrap还通过元素标签、、和给文本做突出样式处理。
/*源码查看bootstrap.css文件第55行~第58行*/
b,strong{font-weight:bold;/*文本加粗*/}
/*源码查看bootstrap.css文件第481行~484行*/
small,.small{font-size:85%;/*标准字体的85%,也就是14px*0.85,差不多是12px*/}
/*源码查看bootstrap.css第485行~487行*/
cite{font-style:normal;}
粗体,斜体
粗体就是给文本加粗,在普通元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中,可以使用和标签让文本直接加粗。
在排版中,除了用加粗来强调突出的文本之外,还可以使用斜体。斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签或来实现。
强调相关的类
在Bootstrap中除了使用标签、等说明正文某些字词,句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的".lead"),这些强调类都是通过颜色来表示强调,具体说明如下:/*具体源码查看bootstrap.css文件第500行~第532行*/
.text-muted{color:#999//提示,使用浅灰色}
.text-primary{color:#428bca;//主要,使用蓝色}
a.text-primary:hover{color:#3071a9;}
.text-success{color:#3c763d;//成功,使用浅绿色}
.text-info{color:#31708f;//通知信息,使用浅蓝色}
a.text-info:hover{color:#245269;}
.text-warning{color:#8a6d3b;//警告,使用黄色}
a.text-waring:hover{color:#66512c;}
.text-danger{color:#a94442;//危险,使用褐色}
a.text-danger:hover{color:#843534;}
文本对齐风格
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。Bootstrap通过定义四个类名来控制文本的对齐风格:
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
/*具体源码查看bootstrap.css文件第488行~第499行*/
.text-left{text-align:left;} .
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-justify{text-align:justify;}