bootstrap之排版样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排版样式</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body style="margin:50px;"> <!-- 1.页面主体 --> <p>Bootstrap框架</p> <p>Bootstrap框架</p> <!-- lead：创建包含段落突出文本 --> <p class="lead">Bootstrap框架</p> <p>Bootstrap框架</p> <!-- 2.标题 --> <!-- small元素作为副标题 --> <h1>Bootstrap框架<small>小标题</small></h1> <h2>Bootstrap框架<small>小标题</small></h2> <h3>Bootstrap框架<small>小标题</small></h3> <h4>Bootstrap框架<small>小标题</small></h4> <h5>Bootstrap框架<small>小标题</small></h5> <h6>Bootstrap框架<small>小标题</small></h6> <!-- 内联元素使用标题字体 --> <span class="h1">Bootstrap框架</span> <!-- 3.内联文本元素 --> <!-- mark：添加标记 --> <p>Bootstrap框架</p> <p><mark>Bootstrap框架</mark></p> <p class="mark">Bootstrap框架</p> <!-- 各种加线条的文本 --> <!-- del：删除的文本 s：无用的文本 ins：插入的文本 u：下划线文本 --> <del>删除的文本</del> <s>无用的文本</s> <ins>插入的文本</ins> <u>下划线文本</u> <!-- 各种强调的文本 --> <!-- small：标准字号的85% strong：加粗700 em：倾斜 --> <small>标准字号的85%</small> <strong>加粗700</strong> <em>倾斜</em> <!-- 4.设置文本对齐 --> <!-- text-left：居左 text-center：居中 text-right：居右 text-justify：两端对齐 text-nowrap：不换行 --> <p class="text-left">居左</p> <p class="text-center">居中</p> <p class="text-right">居右</p> <p class="text-justify">两端对齐</p> <p class="text-nowrap">不换行</p> <!-- 5.设置英文文本大小写 --> <!-- text-lowercase：小写 text-uppercase：大写 text-capitalize：首字母大写 --> <p class="text-lowercase">Bootstrap小写</p> <p class="text-uppercase">Bootstrap：大写</p> <p class="text-capitalize">bootstrap：首字母大写</p> <!-- 6.缩略语 --> <!-- <abbr title="Bootstrap" class="initialism"></abbr> --> <h1>Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr></h1> <!-- 7.地址文本 --> <address> <strong>Twitter</strong><br> 795 Folsom<br> <abbr title="Phone">P：</abbr>（+86）12345678901 </address> <!-- 8.引用文本 --> <blockquote>Bootstrap框架</blockquote> <!-- 反向 --> <blockquote class="blockquote-reverse"> Bootstrap框架 </blockquote> <!-- 9.列表排版 --> <!-- list-unstyled：移除默认样式 --> <ul class="list-unstyled"> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> </ul> <!-- list-inline：设置成内联样式 --> <ul class="list-inline"> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> </ul> <!-- dl-horizontal：水平排列描述列表 --> <dl> <dt>默认</dt> <dd>Bootstrap框架提供常规方法</dd> </dl> <dl class="dl-horizontal"> <dt>dl-horizontal</dt> <dd>Bootstrap框架提供常规方法</dd> </dl> <!-- 10.代码 --> <section><br> <!-- 内联代码 --> <code><section></code><br> <!-- 用户输入 --> press <kbd>ctrl + ,</kbd><br> <!-- 代码块 --> <pre><p>;Please input…</p></pre><br> <!-- 标记变量 --> <var>Bootstrap标记</var><br> <!-- 程序输出 --> <samp>程序输出</samp> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
略懂，略懂....
