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. Linux Centos 6.9中SSH默认端口修改的坑

    关于Linux Centos6.5的SSH默认端口修改的博客有一大堆,我在这里就不啰嗦了,但是面对Centos 6.9,就会发现有一个巨坑: 修改iptables之后执行下面的命令后: # servi ...

  2. 201521123117 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 分析结果:从 ...

  3. MyEclipse中Source Folder，package，folder的区别

    1.在eclipse下,package, source folder, folder都是文件夹. 但它们有区别如: 2. package:当你在建立一个package时,它自动建立到source fo ...

  4. Python: 列表注意细节与元组的基本用法

    列表注意细节: 1.list.clear():将列表中成员清空(与del list区别开) 2.list.copy():复制一份相同的列表(浅COPY,只复制列表第一层) 3.如果两个列表相等,如li ...

  5. Zabbix通过SNMP监控多核CPU使用率时, 计算CPU平均使用率

    环境:没有Agent,只能通过SNMP监控时,需要获取多核CPU的平均使用率. ZABBIX的使用SNMP监控CPU使用率时,由于设备都是多核CPU,监控的都是单独某一核心的使用率,但单独某一核使用率 ...

  6. [原创]MinHook测试与分析(x64下 E9,EB,CALL指令测试，且逆推测试微软热补丁)

    依稀记得第一次接触Hook的概念是在周伟民先生的书中-><<多任务下的数据结构与算法>>,当时觉得Hook很奇妙,有机会要学习到,正好近段日子找来了MiniHook,就一 ...

  7. NameError: name 'messagebox' is not defined 错误处理

    写了段代码,想在按下button的时候跳个提示框出来,调试的时候提示了messagebox未定义 from tkinter import * def test_show(): messagebox.s ...

  8. Javac 编译原理

    写在前面 JDK & JRE  JRE(Java Runtime Enviroment)是Java的运行环境.面向Java程序的使用者,而不是开发者.如果你仅下载并安装了JRE,那么你的系统只 ...

  9. Maven在Windows中的配置以及IDE中的项目创建

    Maven在Windows下的配置 1.Maven下载地址:http://maven.apache.org/download.cgi,下载红框里的版本即可. 2.解压到D盘: 3.修改配置文件sett ...

  10. 接口测试——httpclient介绍与请求方式详解

    httpClient工具介绍 HTTP协议可能是现在lntemet上使用得最多.最重要的协议了,越来越多的Java应用程序需要直接通过HTTP协议来访问网络资源.虽然在JDK的java.net包中已经 ...