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:

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:

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的更多相关文章

  1. iOS阅读器实践系列（一）coretext纯文本排版基础

    前言:之前做了公司阅读类的App,最近有时间来写一下阅读部分的实现过程,供梳理逻辑,计划会写一个系列希望能涉及到尽量多的方面与细节,欢迎大家交流.吐槽.拍砖,共同进步. 阅读的排版用的是coretex ...

  2. ③bootstrap文本使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...

  4. 文字如何实现完美UI？文本排版设计告诉你

    一部手机,电量充足,网络通畅,就足以让我们打发一天的时光,尽情沉浸在手机时代的缤纷世界里.这个信息资源无穷尽的手机网络世界,是设计师和开发者们在不停的探索中一路一步精心打造.如何进一步美化这个世界,优 ...

  5. bootstrap之排版类

    bootstrap之排版类

  6. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  7. AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

    AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...

  8. Bootstrap -- 文本，背景，其他样式

    Bootstrap -- 文本,背景,其他样式 1. 文本样式:展示了不同的文本颜色 使用文本样式: <!DOCTYPE html> <html> <head> & ...

  9. WPF 排版基础

    一.WPF 排版基础 WPF使用控制面板来进行排版,控制面板实际上是一种可以放入WPF界面元素的容器.当用户把界面元素放入控制面板后,WPF会自动把这些界面元素放在它认为合适的地方.WPF开发人员需要 ...

随机推荐

  1. 九度OJ 1016 火星A+B AC版

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  2. 【Alpha阶段】第四次 Scrum Meeting

    每日任务 1.本次会议为第 四次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在禹州楼召开,召开本次会议为20分钟,分析完善接下来的任务: 一.今日站立式会议照片 二.每个人的工 ...

  3. 201521123004《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 答:主要以泛型为主 //简单的泛型类的定义,T为类型参数 public ...

  4. 201521123042 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 参考资料: 百度脑图 XMind 2. 书面作业 作业参考文件下载 Q1.代码阅读:Child压缩包内源代码 1.1 com. ...

  5. 201521123108《Java程序设计》第1周学习总结

    本周学习总结 刚加入java的学习,我感觉很困难.但我觉得学习并不是一蹴而就.只要我多读,多看,多练,一定会取得进步.有空的时候把书本上的代码敲一敲.相信会有回报. 2.书面作业 1.为什么java程 ...

  6. 201521123051《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  7. 201521123115 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  8. 利用Struts拦截器限制上传图片的格式和大小

    在这之前 Struts的一个核心功能就是大量的拦截器,既然是框架,那么自然也就贴心地为我们准备好了各种常用的功能,比如这里即将讨论的如何限制上传图片的格式和大小.那么既然是使用Struts已经写好的拦 ...

  9. 自定义Django的中间件

    分析Django的生命周期,我们知道所有的http请求都要经过Django的中间件. 假如现在有一个需求,所有到达服务端的url请求都在系统中记录一条日志,该怎么做呢? Django的中间件的简介 D ...

  10. ng-model值字符串转数值型（convertToNumber directive）

    <select ng-model="model.id" convert-to-number> <option value="0">Zer ...