bootstrap学习（二）页面

//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小  ，img-responsive
<div class="container">
    <div class="row">
        <img src="../static/1.jpg" class="img-responsive" alt="">
    </div>
</div>

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
或

<span class="h1">aaaaaa</span>
<span class="h2">aaaaaa</span>
<span class="h3">aaaaaa</span>
<span class="h4">aaaaaa</span>

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
small标签会适应前边h标签的大小  自动显示为小一号字体

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff
}

p {
    margin: 0 0 10px
}

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4
}

@media (min-width: 768px) {
    .lead {
        font-size: 21px
    }
}

<abbr title="跟我学习Bootstrap">学习bootstrap</abbr>

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<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>

//无样式列表
<ul class="list-unstyled">
        <li></li>
</ul>

//无序
<ul>
        <li></li>
</ul>


<ol>
        <li></li>
</ol>

//内联列表  一行
<ul class="list-inline">
        <li></li>
</ul>


//有无class 区别：dt、dd标签内容是否显示在同一行
<dl class="dl-horizontal">
        <dt>标题</dt>
        <dd>标题描述</dd>
</dl>