Bootstrap学习笔记——排版

最新推荐文章于 2022-05-01 00:34:21 发布

gengfu_AI

最新推荐文章于 2022-05-01 00:34:21 发布

阅读量747

点赞数

分类专栏： html5 文章标签： bootstrap

本文链接：https://blog.csdn.net/gengfu_php/article/details/78152157

版权

以下内容的开始均是

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>%name%</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>

</body>
</html>

1 主标题

Bootstrap中的标题和HTML中的一样，只是重新定义并覆盖了原来的默认样式。

<body>
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

</body>

优化重置的项目主要有：

1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

2 副标题

副标题的实现主要通过标签来实现的。
具体实例如下：

<body>

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>

</body>

实现效果
这里写图片描述

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。

3 文本段落

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

/源码请查看bootstrap.css文件中第274行~280行/

另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：
/源码请查看bootstrap.css文件中第467行~469行/

此略

4 文本强调（字体大小变化）

对于一个段落p突出显示，则通过添加类名.lead实现，字号加粗增大，行高及margin也相应进行了改变。
具体实现方式

<p>Bootstrap学习笔记</p>
<p class="lead">Bootstrap学习笔记</p>

除此之外，Bootstrap还通过元素标签: 缩小 、粗体 、斜体   和<cite>给文本做突出样式处理。

/源码查看bootstrap.css文件第481行~第484行/

small,.small {
  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/
}

/源码查看bootstrap.css文件第55行~第58行/

b,strong {
  font-weight: bold; /*文本加粗*/
}

/源码查看bootstrap.css第485行~第487行/

cite {
font-style: normal;
}

5 文本强调（字体颜色变化）

在4中的.lead是通过字体大小变化来强调内容的，也可以通过类实现字体的颜色变化来强调。

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning

最低0.47元/天解锁文章

gengfu_AI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记——排版

以下内容的开始均是<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>%name%</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body></b
复制链接

扫一扫