bootstrap-3-基本标签使用类

具体可以将代码复制后,用chrome查看每个效果,到底是加了什么类


<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>斜体emem>
    <strong>着重strongstrong>
    <small>小号smallsmall>
    <b>粗体文本bb>
    <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="是我是我">titleabbr>属性值就可显示出来。p>
    <p>为缩略语设置更小如:<abbr class="initialism">bootstrapabbr>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 Namestrong><br>
      <a href="mailto:#">[email protected]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>无样式列表-列表项1li>
      <li>无样式列表-列表项2li>
      <li>无样式列表-列表项3li>
    ul>
    <ol class="list-inline">
      <li>内联样式表-列表项1li>
      <li>内联样式表-列表项2li>
      <li>内联样式表-列表项3li>
    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>

你可能感兴趣的:(bootstrap)