SOURCE

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">新闻CMS静态网站</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="邮箱" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">登录</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>首页</h1>
        <p>     </p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多 &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>国际</h2>
          <p>  </p>
          <p><a class="btn btn-default" href="#" role="button">查看详情 &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>社会</h2>
          <p> </p>
          <p><a class="btn btn-default" href="#" role="button">查看详情 &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>军事</h2>
          <p> </p>
          <p><a class="btn btn-default" href="#" role="button">查看详情 &raquo;</a></p>
        </div>
      </div>

element.style {
}
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
p {
margin: 0 0 10px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetp {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
Pseudo ::before element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Inherited from div.jumbotron
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
}
Inherited from body
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Inherited from html
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}