bootstrap框架教程第二篇学习（bootstrap基础快速入门-4）
bootstrap框架教程第二篇学习（bootstrap基础快速入门-4）
大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap.css" rel="stylesheet"> </head> <body> <pre class="pre-scrollable" style="max-height: 160px"> ` text-nowrap 不换行 默认文本只要是在container格栅系统中都会自动换行 加了text-nowrap强制不换行 ` 左右浮动 pull-left pull-right ` blockquato内容右浮动 和 pull-right 原理不一样. <code > .pull-right { float: right !important; } blockquote.pull-right { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eee; border-left: 0; } </code> </pre> <div class="container"> <div class="row"> <div class="col-md-2"> 标题 </div> <div class="col-md-10 "> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4> h4 </h4> <h5>h5</h5> <h6>h6</h6> </div> </div> <div class="row"> <div class="col-md-2"> 内联子标题 </div> <div class="col-md-10 "> <h1>h1 <small>内联子标题</small> </h1> <h2>h2 <small>内联子标题</small> </h2> <h3>h3 <small>内联子标题</small> </h3> <h4> h4 <small>内联子标题</small> </h4> <h5>h5 <small>内联子标题</small> </h5> <h6>h6 <small>内联子标题</small> </h6> </div> </div> <div class="row"> <div class="col-md-2"> 主题副本 </div> <div class="col-md-10 "> <h2>h2 <small>内联子标题</small> </h2> <p class="lead">主题副本</p> </div> </div> <div class="row"> <div class="col-md-2"> text-*相关 </div> <div class="col-md-10 "> <p class="text-left text-primary">文本</p> <p class="text-right text-success">文本</p> <p class="text-center text-danger">文本</p> <p class="text-justify">文本</p> <p class="<!--text-nowrap-->">文本</p> </div> </div> <div class="row"> <div class="col-md-2"> address </div> <div class="col-md-10 "> <address> <strong>北京市海淀区</strong> name<br> sex<br> <abbr title="电话号码">p:</abbr>010 123456<br> <a href="#">www.xxx.com</a> </address> </div> </div> <div class="row"> <div class="col-md-2 "> 引用 blockquote </div> <div class="col-md-10"> <blockquote class="pull-right"> <p>引用文本内容aaaaaaaaaaaaa引用文本内容aaaaaaaaaaaaa </p> <small><cite>xxx</cite></small> </blockquote> </div> </div> </div> </body> <script src="https://img.aigexing.combootstrap.js"></script> <script src="https://img.aigexing.comjquery.js"></script> </html>
