Bootstrap文本排版基础--Bootsrap

时间：2017-10-15 19:37:03 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：text font title html 一个分享 margin scale 最好

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="images/river.jpg" height="768" width="1366"/>
　　　　　　</div>
　　　　</div>
　　</div>
</body>
</html>

Effect Picture:

技术分享

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="images/river.jpg" height="768" width="1366"/>
　　　　　　</div>
　　　　　　<div class="col-sm-8">
　　　　　　　　<h1>第一个标题样式<small>小字体</small></h1>
　　　　　　　　<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:

技术分享

3、页面主题

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

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

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

Before：

After:

技术分享

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

技术分享

4、强调文本

small、em、cite（引用网址）、b、strong相关

技术分享

5、缩略语abbr

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

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

技术分享

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>

技术分享

（7）引用 blockquote，引用里面最好设有p标签

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

技术分享

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

技术分享

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

Bootstrap文本排版基础--Bootsrap

标签：text font title html 一个分享 margin scale 最好

原文地址：http://www.cnblogs.com/qikeyishu/p/7671161.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

Bootstrap文本排版基础--Bootsrap

1、排版前的基础

（1）移动设备优先

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

（2）响应式图片

CSS：img-responsive

demo.html:

Effect Picture:

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:

Effect Picture:

3、页面主题

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

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

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

Before：

After:

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

4、强调文本

small、em、cite（引用网址）、b、strong相关

5、缩略语abbr

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

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

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>

（7）引用 blockquote，引用里面最好设有p标签

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

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

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

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

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

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

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

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