Bootstrap文本排版基础--Bootsrap

时间：2021-12-07 04:42:18

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库

Bootstrap文本排版基础--Bootsrap的更多相关文章

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

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

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

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

  3. 响应式开发&lpar;六&rpar;-----Bootstrap CSS----------Bootstrap文本排版

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

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

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

  5. bootstrap之排版类

    bootstrap之排版类

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

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

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

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

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

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

  9. WPF 排版基础

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

随机推荐

  1. drawable以及Bitmap的基本操作

    一.drawable  图形对象,可以转载常用格式的图像,可能是(位图)Bitmapdrawable,或者shapedrawable(图形),还可能是多种其他图片格式GIF,PNG,JEPG 二.Bi ...

  2. hadoop2&period;7&period;1安装

    Hadoop2.7.1安装与配置 http://www.oschina.net/question/117352_247251 http://www.cnblogs.com/wayne1017/arch ...

  3. 使用 JavaScript 实现链表

    代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. flash项目优化总结

    swc中的类如果没有在项目中没有被申明,在编译时就不会被编译进swf中,这样一些swc中的类和资源类如果不用了,只要不被声明就不会占用swf大小了.

  5. 20145227《Java程序设计》第3次实验报告

    20145227<Java程序设计>第3次实验报告 实验步骤与内容 一.实验内容 XP基础 XP核心实践 相关工具 二.实验过程 (一)敏捷开发与XP 1.XP是以开发符合客户需要的软件为 ...

  6. db2&lowbar;merge

    DB2 MERGE INTO语句的使用   DB2中的Merge语句可以将一个表中的数据合并到另一个表中,在合并的同时可以根据条件进行插入.删除.更新等操作,功能非常强大.   语法如下:www.2c ...

  7. SpringMvc解决Restful中文乱码问题

    中文乱码问题解决方式: <!-- 解决中文乱码问题 --> <filter> <filter-name>CharacterEncodingFilter</fi ...

  8. Pyinstaller &lpar;python打包为exe文件&rpar;

    需求分析: python脚本如果在没有安装python的机器上不能运行,所以将脚本打包成exe文件,降低脚本对环境的依赖性,同时运行更加迅速. 当然打包的脚本似乎不是在所有的win平台下都能使用,wi ...

  9. 线程的私有领地 ThreadLocal

    从名字上看,『ThreadLocal』可能会给你一种本地线程的概念印象,可能会让你联想到它是一个特殊的线程. 但实际上,『ThreadLocal』却营造了一种「线程本地变量」的概念,也就是说,同一个变 ...

  10. Spring Boot 2&period;x （十）：构建优雅的RESTful接口

    RESTful 相信在座的各位对于RESTful都是略有耳闻,那么RESTful到底是什么呢? REST(Representational State Transfer)表述性状态转移是一组架构约束条 ...

相关文章