一、版式排版
二、代码实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <Meta charset="utf-8"> 5 <Meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <mata http-equiv="X-UA-Compatible" content="IE=edge"> 7 <link rel="stylesheet" href="css/bootstrap.css"> 8 <script src="js/bootstrap.js"></script> 9 <script src="js/jquery.js"></script> 10 <title>bootstrap</title> 11 <style> 12 hr{ 13 border: 1px solid gray; 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 标题 --> 19 <h1>你好Bootstrap</h1> 20 <h2>你好Bootstrap</h2> 21 <h3>你好Bootstrap</h3> 22 <h4>你好Bootstrap</h4> 23 <h5>你好Bootstrap</h5> 24 <h6>你好Bootstrap</h6> 25 <hr> 26 <!-- 页面主体 通过添加.lead 类可以让段落突出显示--> 27 <p>这是页面主体</p> 28 <p class="lead">这是页面主体</p> 29 <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p> 30 <hr> 31 <!-- 内联文本元素 --> 32 <span>普通文本</span> 33 <mark>标记文本</mark> 34 <del>被删除的文本</del> 35 <s>无用文本</s> 36 <ins>插入文本</ins> 37 <u>带下划线的文本</u> 38 <span>普通文本</span><small>小号文本</small> 39 <strong>着重</strong> 40 <em>斜体</em> 41 <hr> 42 <!-- 对齐 --> 43 <p class="text-left">左对齐</p> 44 <p class="text-center">居中对齐</p> 45 <p class="text-right">右对齐</p> 46 <p class="text-justify">两端对齐</p> 47 <p class="text-Nowrap">文本超出后不换行</p> 48 <hr> 49 <!-- 改变大小写 --> 50 <p class="text-lowercase">Lowercased text.</p> 51 <p class="text-uppercase">Uppercased text.</p> 52 <p class="text-capitalize">Capitalized text.</p> 53 <hr> 54 <!-- 缩略语 --> 55 <abbr title="attribute的缩写">attr</abbr> 56 <abbr title="HyperText MarkuP Language" class="initialism">HTML</abbr> 57 <hr> 58 <!-- 地址 --> 59 <address> 60 <strong>Twitter, Inc.</strong><br> 61 1355 Market Street, Suite 900<br> 62 San Francisco, CA 94103<br> 63 <abbr title="Phone">P:</abbr> (123) 456-7890 64 </address> 65 <address> 66 <strong>Monica.zhao</strong><br> 67 <a href="mailto:#">first.last@example.com</a> 68 </address> 69 <hr> 70 <!-- 引用 --> 71 <blockquote> 72 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 73 </blockquote> 74 <blockquote class="blockquote-reverse"> 75 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 76 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> 77 </blockquote> 78 <hr> 79 <!-- 列表 --> 80 <ul> 81 <li>111</li> 82 <li>222</li> 83 <li>333</li> 84 </ul> 85 <br> 86 <ol> 87 <li>111</li> 88 <li>222</li> 89 <li>333</li> 90 </ol> 91 <br> 92 <ul class="list-unstyled"> 93 <li>无样式列表</li> 94 <li>无样式列表</li> 95 </ul> 96 <br> 97 <ul class="list-inline"> 98 <li>内联列表</li> 99 <li>内联列表</li> 100 </ul> 101 <br> 102 <!-- 描述 --> 103 <dl> 104 <dt>粗体标题1</dt> 105 <dd>标准描述性文字</dd> 106 </dl> 107 <dl> 108 <dt>粗体标题2</dt> 109 <dd>标准描述性文字</dd> 110 </dl> 111 <!-- 描述（水平排列） --> 112 <dl class="list-group-horizontal-sm"> 113 <dt class="list-group-item">粗体标题1</dt> 114 <dd class="list-group-item">标准描述性文字,屏幕尺寸大于768显示</dd> 115 </dl> 116 </body> 117 </html>
