现在开始学习bootstrap的页面排版
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>bootstrap页面排版</title> 6 <link href="css/bootstrap.min.css" rel="stylesheet"> 7 </head> 8 <body style="margin:200px;"> 9 <!--1.内联元素--> 10 <p>bootstrap<mark>框架</mark></p> //添加标记<br/> 11 <del>bootstrap框架</del> //删除文本<br/> 12 <s>bootstrap框架</s> //无用文本<br/> 13 <ins>bootstrap框架</ins> //插入文本<br/> 14 <small>bootstrap框架</small> //标准字号的85%<br/> 15 <strong>bootstrap框架</strong> //加粗700<br/> 16 <em>bootstrap框架</em> //倾斜<br/> 17 <!--2.对齐--> 18 <p class="text-left">bootstrap框架</p> //居左 19 <p class="text-center">bootstrap框架</p> //居中 20 <p class="text-right">bootstrap框架</p> //居右 21 <p class="text-nowrap">bootstrap框架</p> //不换行 22 <!--3.大小写--> 23 <p class="text-lowercase">bootstrap框架</p> //小写 24 <p class="text-uppercase">bootstrap框架</p> //大写 25 <p class="text-capitalize">bootstrap框架</p> //首字母大写 26 <!--4.缩略语--> 27 <h3><abbr class="initialism">bootstrap</abbr>框架</h3> 28 <!--5.地址--> 29 <address> 30 <strong>Twitter, Inc.</strong><br> 31 795 Folsom Ave, Suite 600<br> 32 San Francisco, CA 94107<br> 33 <abbr title="Phone">P:</abbr> (123) 456-7890 34 </address> 35 36 <address> 37 <strong>Full Name</strong><br> 38 <a href="mailto:#">[email protected]</a> 39 </address> 40 <!--6.引用文本--> 41 <blockquote class="pull-left"> 42 哈哈 43 </blockquote> 44 <blockquote class="blockquote-reverse"> 45 哈哈 46 </blockquote> 47 <!--7.列表--> 48 <ul class="list-unstyled "> //无样式列表 49 <li>Full Name</li> 50 <li>Full Name</li> 51 <li>Full Name</li> 52 <li>Full Name</li> 53 </ul> 54 55 <ul class="list-unstyled list-inline"> //水平列表 56 <li>Full Name</li> 57 <li>Full Name</li> 58 <li>Full Name</li> 59 <li>Full Name</li> 60 </ul> 61 62 <ul class="list-inline"> //水平列表 63 <li>Full Name</li> 64 <li>Full Name</li> 65 <li>Full Name</li> 66 <li>Full Name</li> 67 </ul> 68 69 <dl class="dl-horizontal"> //段落标题 70 <dt>Bootstrap</dt> 71 <dd>Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</dd> 72 <dt>dl-horizontal</dt> 73 <dd>.dl-horizontal 可以让 内的短语及其描述排在一行。开始是像的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。</dd> 74 </dl> 75 <!--7.代码--> 76 //内联代码 77 <code><section></code></br> 78 //用户输入 79 press <kbd>ctrl + ,</kbd> 80 //代码块 81 <pre>代码块</pre> 82 <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) --> 83 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 84 <!-- Include all compiled plugins (below), or include individual files as needed --> 85 <script src="js/bootstrap.min.js"></script> 86 </body> 87 </html>
时间： 2024-08-02 02:48:23