bootstrap02_内容概述
一.排版样式 (下面示例*代表class)
1.段落突出 *=lead
1 <p>山外有山,<span class="lead">人外有人</span></p>
2.标题显示+副标题
1 <h1>标题1和<small>副标题</small></h1> 2 <h2>标题2</h2> 3 <h3>标题3</h3> 4 <h4>标题4</h4> 5 <h5>标题5</h5> 6 <h6>标题6</h6>
3.内联文本元素=删除线+加粗字体+下划线+斜体
1 <strong>加粗</strong> 2 <del>删除线</del> 3 <u>下划线</u> 4 <em>倾斜</em>
4.对齐方式
<p class="text-center">居中</p> <p class="text-right">右对齐</p> <p class="text-left">左对齐</p>
5.列表 *=list-unstyled表示无样式 *=list-inline表示将列表项放置一行 *=dl-horizontal表示将说明列表放置一行
1 <h1>列表 内联列表 水平列表</h1> 2 <ul class="list-unstyled list-inline"> 3 <li>姓名</li> 4 <li>性别</li> 5 <li>年龄</li> 6 </ul> 7 <dl class="dl-horizontal"> 8 <dt>表头1</dt> 9 <dd>内容1</dd> 10 </dl>
6.引用 blockquote是引用标签 *=blockquote-reverse表示将引用右对齐 标签footer著名引用的出处 标签cite包裹出处的名称
1 <blockquote>天外有人<footer class="blockquote-reverse"><cite>梅子大大</cite></footer></blockquote>
7.改变大小写 *=text-uppercase 表示转大写 *=text-lowercase表示转小写 *=text-capitalize表示将首字母转为大写
1 <p class="text-uppercase">i love you</p> 2 <p class="text-lowercase">i love you</p> 3 <p class="text-capitalize">i love you</p>
8.地址 address
1 address>家乡地址:湖南省 衡阳市 常宁市</address> 2 <address>居住地址:湖南省 长沙市 岳麓区</address>
9.缩略语 abbr表示缩略标签 属性title内写上要显示的全部内容 *=initialism表示首字母缩略内容
1 <abbr title="超文本语言 hyper text mark language">html是一种超文本标记语言</abbr><br> 2 <abbr title="xml 是html的一个补充,用于存储数据的" class="initialism">xml语言</abbr>
二.代码
1.内联代码
2.用户输入代码
3.程序输出代码
4.基本代码块
1 <h1>内联代码</h1> 2 <code>你好!</code> 3 <h1>程序输出代码</h1> 4 <samp>你好!</samp> 5 <h1>用户输入代码</h1> 6 <kbd>你好!</kbd> 7 <h1>基本代码块</h1> 8 <pre class="pre-scrollable">你好鸭!</pre>
三.表格
1.基本表格 *=table
2.条纹表格 *=table table-stripped
3.鼠标悬停表格 *=table table-hover
4.响应表格 *=table table-responsive
5.改变表格颜色
*=active 默认白
*=danger 危险红
*=info 浅蓝
*=warning 警告黄
*=succes 成功绿
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论