前端框架Bootstrap--排版样式

Paste_Image.png
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。
以下是bootstrap--排版样式的知识,希望对你们有所帮助:

1.Bootstrap将全局foot-size设置为14px,line-height行高设置为1.428(即20px);段落元素被设置等于1/2行高(即10px);颜色被设置为#333;

2.从Firebug查看元素了解到,Bootstrap分别对h1h6进行了css样式的重构,并且还支持普通内联定义class=(h1h6)来实现相同的功能

例子:
(1)

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png

(2)

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
3.内联文本元素

//添加标记,<mark>元素或.mark类

<p>Bootstrap<mark>框架</mark></p>

//各种加线条的文本

<del>Bootstrap框架</del> //删除的文本
<s>Bootstrap框架</s> //无用的文本
<ins>Bootstrap框架</ins> //插入的文本,即下划线文本
<u>Bootstrap框架</u> //效果同上,下划线文本

//各种强调的文本

<small>Bootstrap框架</small> //标准字号的85%
<strong>Bootstrap框架</strong> //加粗了700
<em>Bootstrap框架</em> //倾斜

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
4.对齐

//设置文本对齐

<p class="text-left">Bootstrap框架</p> //居左
<p class="text-center">Bootstrap框架</p> //居中
<p class="text-right">Bootstrap框架</p> //居右
<p class="text-justify">Bootstrap框架</p> //两端对齐
<p class="text-nowrap">Bootstrap框架</p> //不换行

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
5.大小写

//设置英文文本大小写
<p class="text-lowercase">Bootstrap框架</p> //小写
<p class="text-uppercase">Bootstrap框架</p> //大写
<p class="text-capitalize">Bootstrap框架</p> //首字母大写

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
6.缩略语
   Bootstrap<abbr class="initialism">框架</abbr>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
7.地址文本

//设置地址,去掉了倾斜,设置了行高,底部20px
<address>
<strong>Twitter,Inc</strong>

Twitter,Inc

<abbr title="phone">p:</abbr>(123) 456-7890
</address>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
8.引入文本

//默认样式引用,增加了做边线,设定了字体大小和内外边距
<blockquote class="blockquote-reverse">Bootstrap框架</blockquote>
//反向
<blockquote class="blockquote-reverse">Bootstrap框架</blockquote>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
9.列表排版

//移出默认样式
<ul class="list-unstyle">
<li>框架</li>
<li>框架</li>
<li>框架</li>
</ul>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
设置成内联

<pre>
<ul class="list-inline">
<li>框架</li>
<li>框架</li>
<li>框架</li>
</ul>
</pre>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

<p>引入bootstrap样式后</p>

Paste_Image.png
水平排列描述列表

<dl class="dl-horizontal">
<dt>框架</dt>
<dd>框架</dd>
</dl>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
10.代码

//内联代码
<code>&lt ;section&gt ;</code>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png

<p><h5>用户输入</h5></p>
<pre>
press<kbd>ctrl+,</kbd>
</pre>
<h5>例子</h5>

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png

代码块

<p>Please input...</p>

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png

Bootstrap还列举了<var>表示标记变量,<samp>表示程序输出,只不过没有重新复写Css

本文作者lilyping
越努力,越幸运
原文链接:https://www.jianshu.com/u/3908e601f4ec
微信公众号:BestLilyPing
github:https://github.com/lilyping
Demos源码地址:https://github.com/lilyping

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,705评论 1 92
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,813评论 3 184
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,967评论 1 4
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,129评论 0 1
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,004评论 0 1