bootstrap系列之二排版基础

xiaoxiao2021-02-28  109

效果

<body> <div class="container <div class="row"> <div class="col-sm-4"> <img src="img/pic01.jpg" class="img-responsive"/> </div> <div class="col-sm-8"> <h1>第一个标题样式<small>小字体</small></h1> <h2>第一个标题样式<small>小字体</small></h2> <h3>第一个标题样式<small>小字体</small></h3> <h4>第一个标题样式<small>小字体</small></h4> <h5>第一个标题样式<small>小字体</small></h5> <h6>第一个标题样式<small>小字体</small></h6> <p class="h1">第一个标题样式<small>小字体</small></p> <p class="h2">第一个标题样式<small>小字体</small></p> <p class="h3">第一个标题样式<small>小字体</small></p> <p class="h4">第一个标题样式<small>小字体</small></p> <p class="h5">第一个标题样式<small>小字体</small></p> <p class=" lead text-center"> ootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3. <small>small</small> <em>em</em> <cite>cite url</cite> <b>b</b> <hr/> <abbr title="跟我一起学习Bootstrap">学习bootstrap</abbr> <abbr title="跟我一起学习Bootstrap" class="initialism">学习bootstrap</abbr> <br/> <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </p> <blockquote class="pull-right"> <p> Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0... </p> <small>来自<em>bootstrap中文网</em></small> </blockquote> </div> </div> </div> </body>

转载请注明原文地址: https://www.6miu.com/read-28533.html

最新回复(0)