标签：padding 列表 图片 方便 spl href container lin info
font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--没有压缩的，即是没有去除空格和换行，方便学习--> <link rel="stylesheet" href="bs/css/bootstrap.css" /> <!-- 压缩版的，去除了空格和换行，文件小，省带宽 <link rel="stylesheet" href="bs/css/bootstrap.min.css" /> --> <!--要使用bootstrap的js插件，必须有jquery的支持--> <script type="text/javascript" src="js/jquery.min.js" ></script> <!--bootstrap的主包，同样bootstrap.min.js是压缩版--> <script type="text/javascript" src="bs/js/bootstrap.js" ></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstrap前端框架</h1> </div> </body> </html>
<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
效果截图
与传统p标签相比，字体加黑，加粗，也即是强调
<mark>Nullam </mark>
也即是字体加了背景
<del>Nullam </del>
<small>Nullam quis risus eget urna mollis </small>
字体大小比周围小一号
<p class="text-center">it sit amet non magna. </p>
text-center文本居中，常用的有text-right、text-left，text-justify两端对齐，text-nowrap
<!--全部字母小写--> <p class="text-lowercase">it sit amet non magna. </p> <!--全部字母大写--> <p class="text-uppercase">it sit amet non magna. </p> <!--首字母大写--> <p class="text-capitalize">it sit amet non magna. </p>
<ul class="list-unstyled"> <li>sfd</li> <li>sfd</li> <li>sfd</li> <li>sfd</li> </ul>
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。
<ul class="list-inline"> <li>...</li> </ul>
也即是通过设置display: inline-block;并添加少量的内补（padding），将所有元素放置于同一行。
<dl>
<dt>选择题</dt>
<dd>A.Linux</dd>
<dd>B.Windows</dd>
</dl>
默认就改变了样式，标题加粗
<dl class="dl-horizontal"> <dt>选择题</dt> <dd>A.Linux</dd> <dd>B.Windows</dd> </dl>
标签：padding 列表 图片 方便 spl href container lin info
原文地址：https://www.cnblogs.com/PCBullprogrammer/p/10361123.html
