bootstrap-3-基本标签使用类

来源：互联网发布：ubuntu 手机助手编辑：程序博客网时间：2024/06/03 17:52
具体可以将代码复制后，用chrome查看每个效果，到底是加了什么类
<!DOCTYPE html><html>  <head>    <title></title>    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  </head>  <body><h1>标题<small>副标题</small></h1>    <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>    <hr>    <h2>p标签</h2>    <p>boostrap无任何样式段落标签</p>    <p class="lead">突出显示的段落标签</p>    <div><strong style="color: red;">温馨提示:</strong>可以修改variables.less文件中的@font-size-base (定义了全局font-size基准)和 @line-height-base(定义了全局line-height基准)就可以<em>自定义</em>修改bootstrap的<span style="font-weight: bold;color: blue;font-size: 24px;">默认样式</span>了</div>    <hr>    <h2>强调标签</h2>    <em>斜体em</em>    <strong>着重strong</strong>    <small>小号small</small>    <b>粗体文本b</b>    <i>斜体文本i，用于发言、技术短语等</i>    <hr>    <h3>对齐</h3>    <p class="text-left">文本左对齐</p>    <p class="text-center">文本居中对齐</p>    <p class="text-right">文本右对齐</p>    <hr>    <h3>强调</h3>    <p class="text-muted">温和的文本</p>    <p class="text-primary">主要的文本</p>    <p class="text-success">成功的文本</p>    <p class="text-info">信息的文本</p>    <p class="text-warning">警告的文本</p>    <p class="text-danger">危险的文本</p>    <hr>    <dt>缩略语</dt>    <dd style="text-indent:40px;">简而言之就是对某部分进行缩写,当鼠标移过去可以显示完整的信息</dd>    <p>在某些浏览器中，当您把鼠标移至缩略词语上时，<abbr title="是我是我">title</abbr>属性值就可显示出来。</p>    <p>为缩略语设置更小如:<abbr class="initialism">bootstrap</abbr></p>    <hr>    <h3>地址</h3>    <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>    <hr>    <h3>引用</h3>    <blockquote class="pull-right">      <p>今天浪费的时间，会在以后让你加倍补回来的</p>      <small>记  至2017-7-19还没找到工作的自己</small>    </blockquote>    <br>    <h3>列表</h3>    <ul class="list-unstyled">      <li>无样式列表-列表项1</li>      <li>无样式列表-列表项2</li>      <li>无样式列表-列表项3</li>    </ul>    <ol class="list-inline">      <li>内联样式表-列表项1</li>      <li>内联样式表-列表项2</li>      <li>内联样式表-列表项3</li>    </ol>    <hr>    <h3>描述</h3>    <dl>    <dt>要描述的短语</dt>    <dd>描述短语的内容</dd>    </dl>    <dl class="dl-horizontal">      <dt>水平排列--短语</dt>      <dd>描述的内容</dd>    </dl>    <hr>    <h3>代码</h3>    <p>包含的代码片段。如:        <code>function hello(){代码块}</code>        或<pre> function hi(){代码块}</pre>    </p>    <hr>    <h3>表格</h3>    <table class="table">      <tr>        <th colspan="2" style="text-align: center;">基本表格</th>      </tr>      <tr>          <td>表格第一行第一列</td>          <td>表格第一行第二列</td>      </tr>      <tr>          <td>表格第二行第一列</td>          <td>表格第二行第二列</td>      </tr>      <tr>          <td>表格第三行第一列</td>          <td>表格第三行第二列</td>      </tr>    </table>    <table class="table table-striped">      <tr>        <th colspan="2" style="text-align: center;">条纹状表格</th>      </tr>      <tr>          <td>表格第一行第一列</td>          <td>表格第一行第二列</td>      </tr>      <tr>          <td>表格第二行第一列</td>          <td>表格第二行第二列</td>      </tr>      <tr>          <td>表格第三行第一列</td>          <td>表格第三行第二列</td>      </tr>    </table>    <p class="text-info">条纹状表格是通过:nth-child CSS选择器实现的，而这一功能不被Internet Explorer 8支持。</p>    <table class="table table-bordered">      <tr>        <th colspan="2" style="text-align: center;">带边框的表格</th>      </tr>      <tr>          <td>表格第一行第一列</td>          <td>表格第一行第二列</td>      </tr>      <tr>          <td>表格第二行第一列</td>          <td>表格第二行第二列</td>      </tr>      <tr>          <td>表格第三行第一列</td>          <td>表格第三行第二列</td>      </tr>    </table>    <table class="table table-hover">      <tr>        <th colspan="2" style="text-align: center;">悬停效果表格</th>      </tr>      <tr>          <td>表格第一行第一列</td>          <td>表格第一行第二列</td>      </tr>      <tr>          <td>表格第二行第一列</td>          <td>表格第二行第二列</td>      </tr>      <tr>          <td>表格第三行第一列</td>          <td>表格第三行第二列</td>      </tr>    </table>    <table class="table table-condensed">      <tr>        <th colspan="2" style="text-align: center;">紧缩表格</th>      </tr>      <tr>          <td>表格第一行第一列</td>          <td>表格第一行第二列</td>      </tr>      <tr>          <td>表格第二行第一列</td>          <td>表格第二行第二列</td>      </tr>      <tr>          <td>表格第三行第一列</td>          <td>表格第三行第二列</td>      </tr>    </table>    <table class="table">      <tr>        <th colspan="2" style="text-align: center;">单元格状态</th>      </tr>      <tr>          <td class="active">鼠标悬停在行或单元格上时所设置的颜色</td>          <td class="success">标识成功或积极的动作</td>      </tr>      <tr>          <td class="warning">标识警告或需要用户注意</td>          <td class="danger">标识危险或潜在的带来负面影响的动作</td>      </tr>    </table>    <div class="table-responsive">      <table class="table">        <tr>          <th colspan="2" style="text-align: center;">响应式表格</th>        </tr>        <tr>            <td>表格第一行第一列</td>            <td>表格第一行第二列</td>        </tr>        <tr>            <td>表格第二行第一列</td>            <td>表格第二行第二列</td>        </tr>        <tr>            <td>表格第三行第一列</td>            <td>表格第三行第二列</td>        </tr>      </table>    </div>    <script src="bootstrap/jq/jq.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script></body></html>
阅读全文
0 0