主要学习Bootstrap全局CSS中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。
一、页面排版
1.页面主体
Bootstrap将全局font-size设置未14pix,line-height行高设置为1.428(20pix),<p>段落元素被设置等于1/2行高(10pix),颜色设置为#333(深灰色)。
事例 标标签p 和class="lead"配合使用
<p class="lead">Bootstrap</p>
<p>Bootstrap</p>
<p>Bootstrap</p>
<p>Bootstrap</p>
lead css.png
lead显示样式.png
2.标题
可直接用h1-h6标签,也可使用 类来表示 class="h1" ,可在标题内容中插入<small></small>
<h1>Bootstrap框架</h1>
<h1>Bootstrop<small>框架</small></h1>
<h2>Bootstrap框架</h2>
<h3>Bootstrap框架</h3>
<h4>Bootstrap框架</h4>
<h5>Bootstrap框架</h5>
<h6>Bootstrap框架</h6>
图片.png
3.内联文本元素
添加<mark></mark>标签或class="mark"类 mark类会把整行都改变
添加各种线条的文本<del></del> <s></s> 删除 <ins></ins> <u></u>下划线
强调文本使用标签 small 字体变小 strong字体变粗 em斜体
<p><mark>Bootstrap框架</mark></p>
<p class="mark">Bootstrap</p>
<p>Bootstrap</p>
<p><del>Bootstrap框架</del></p>
<p><s>Bootstrap框架</s></p>
<p><ins>Bootstrap框架</ins></p>
<p><u>Bootstrap框架</u></p>
<p><strong>Bootstrap框架</strong></p>
<p><small>Bootstrap框架</small></p>
<p><em>Bootstrap框架</em></p>
mark.png
线条+强调文本.png
4.对齐
class="text-left"
class="text-center"
class="text-right"
class="text-justify" 两端对齐
class="text-nowrap" 不换行
<div class="text-right">
<p>div右对齐</p>
<p>DIV</p>
</div>
<p class="text-left">框架</p>
<p class="text-center">框架</p>
<p class="text-right">框架</p>
<p class="text-justify">框架框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj</p>
<p class="text-nowrap">框架hdhjhajdhjshdjahdjhgkdjfkejfkfkdfknbnhdfjdhfjhsjjshjfhsjhjshfjsfsfd dsjhdjshjhjadjaj</p>
图片.png
5.大小写
class="text-lowercase"
class="text-uppercase"
class="text-capitalize" , 首字母大写
6.缩略语
<abbr class="initialism">bs</abbr>
字母会变成大写
7. 地址文本
<address>中国北京</address>
去掉了倾斜,设置了行高
8.引用文本
blockquote标签
居右 class=“blockquote-reverse” / class="pull-right"
<blockquote>这是引用文本</blockquote>
<blockquote class="blockquote-reverse">这是引用文本居右</blockquote>
<blockquote class="pull-right">这是引用文本居右</blockquote>
图片.png
9.列表排版
ul ol移除默认样式 class="list-unstyled"
class="list-inline"变成一行
<ul class="list-unstyled list-inline">
<li>cat</li>
<li>dog</li>
<li>fish</li>
</ul>
水平排列描述列表 dl dt dd,class="dl-horizontal"
<dl>
<dt>Bootstrap</dt>
<dd>Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用</dd>
</dl>
图片.png
<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用</dd>
</dl>
图片.png
10.代码
内联代码 code
用户输入 kbd
代码块 pre
<code><section></code>
press <kbd>ctrl+,</kbd>
<pre><p>Please input...</p></pre>
图片.png
网友评论