Bootstrap文本排版基础--Bootsrap

1、排版前的基础

(1)移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1">

(2)响应式图片

CSS:img-responsive

demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="data:images/river.jpg" height="768" width="1366"/>
      </div>
    </div>
  </div>
</body>
</html>

Effect Picture:

Bootstrap文本排版基础--Bootsrap

2、标题

CSS:class="h1"、"h2"、"h3"、"h4"、"h5"、"h6"

h1  36px margin-top:20px margin-bottom:10px;

h2  30px margin-top:20px margin-bottom:10px;

h3  24px margin-top:20px margin-bottom:10px;

h4  18px margin-top:10px margin-bottom:10px;

h5  14px margin-top:10px margin-bottom:10px;

h6  12px margin-top:10px margin-bottom:10px;

demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <img class="img-responsive" src="data:images/river.jpg" height="768" width="1366"/>
      </div>
      <div class="col-sm-8">
        <h1>第一个标题样式<small>小字体</small></h1><!--h标签里可以使用small标签,small标签文字大小在h1~3占h标签的65%,4~6占h75%-->
        <h2>第一个标题样式<small>小字体</small></h2>
        <h3>第一个标题样式<small>小字体</small></h3>
        <h4>第一个标题样式<small>小字体</small></h4>
        <h5>第一个标题样式<small>小字体</small></h5>
        <h6>第一个标题样式<small>小字体</small></h6>
        <p class="h1">第一个标题样<small>小字体</small>式<small>小字体</small></p>
        <p class="h2">第一个标题样式<small>小字体</small></p>
        <p class="h3">第一个标题样式<small>小字体</small></p>
        <p class="h4">第一个标题样式<small>小字体</small></p>
        <p class="h5">第一个标题样式<small>小字体</small></p>
        <p class="h6">第一个标题样式<small>小字体</small></p>
      </div>
    </div>
  </div>
</body>
</html>

Effect Picture:

Bootstrap文本排版基础--Bootsrap

3、页面主题

body全局样式:Background-color:white;font-size:14px margin:0; 行间距:20px

p全局样式:font-size:14px

强调<p>标签里的内容,可以给p标签里加类选择器class="lead"

Before:

Bootstrap文本排版基础--Bootsrap

After:

Bootstrap文本排版基础--Bootsrap

对齐方式:class="text-center"

Bootstrap文本排版基础--Bootsrap

Bootstrap文本排版基础--Bootsrap

Bootstrap文本排版基础--Bootsrap

4、强调文本

small、em、cite(引用网址)、b、strong相关

Bootstrap文本排版基础--Bootsrap

Bootstrap文本排版基础--Bootsrap

5、缩略语abbr

<abbr title="Bootstrap">Bootstrap</abbr>
<abbr title="Bootstrap" class="initialism">Bootstrap</abbr>

initialism类选择器定义的字母是原来的90%,并且会使小写字母转换为大写字母

Bootstrap文本排版基础--Bootsrap

6、地址元素address

.address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857143;
}

<address>
  <strong>地址:</strong><br/>
  <a href="mailto:#">qikeyishu123@163.com</a>  
</address>

Bootstrap文本排版基础--Bootsrap

(7)引用 blockquote,引用里面最好设有p标签

<blockquote>
  <p>Bootsrap</p>
  <cite>来自<em>Bootstrap中文网</em></cite>
</blockquote>

Bootstrap文本排版基础--Bootsrap

<blockquote class="pull-right">
  <p>Bootsrap</p>
  <cite>来自<em>Bootstrap中文网</em></cite>
</blockquote>

Bootstrap文本排版基础--Bootsrap

扩展:Botstrap使用第三方库Normalize.css,Normalize是一个专门用于将不同浏览器的默认css效果特征统一的css库

上一篇:iOS阅读器实践系列(一)coretext纯文本排版基础


下一篇:linux tricks 之 BUILD_BUG_ON_ZERO.