BootStrap实战

导航栏

<!-- 导航 -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-test" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">WEN98Y</a>
    </div>

    <div class="collapse navbar-collapse" id="nav-test">
      <ul class="nav navbar-nav">
        <li class="active"><a href="">首页</a></li>
        <li><a href="">关于</a></li>
        <li><a href="">登陆</a></li>
      </ul>
    </div>
  </div>
</nav>

可以响应式导航

轮播图

->
<div id="myCarousel" class="carousel slide">
  <!-- 轮播（Carousel）指标 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="../assets/slide_1.png" alt="slide_1">
    </div>
    <div class="item">
      <img src="../assets/slide_2.png" alt="slide_2">
    </div>
    <div class="item">
      <img src="../assets/slide_3.png" alt="slide_3">
    </div>
  </div>
  <!-- 轮播（Carousel）导航 -->
  <a href="#myCarousel" class="left carousel-control" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a href="#myCarousel" class="right carousel-control" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

可以固定最小宽度和高度，以便于显示图片所有部分。

CSS：

.carousel-inner > .item > img {
  min-width: 100%;
  height: 500px;
}

案例

<div class="case container">
  <div class="row">
    <div class="col-md-4">
      <img src="../assets/case_1.png" alt="案例1" class="img-circle">
      <h2>小明</h2>
      <p>I like it.</p>
    </div>
    <div class="col-md-4">
      <img src="../assets/case_2.png" alt="案例2" class="img-circle">
      <h2>Mrishow</h2>
      <p>你说啥？</p>
    </div>
    <div class="col-md-4">
      <img src="../assets/case_3.png" alt="案例3" class="img-circle">
      <h2>Wenrs</h2>
      <p>你2啊。</p>
    </div>
  </div>
</div>

CSS：

.navbar {
  margin-bottom: 0;
}
.case {
  text-align: center;
  margin-top: 20px
}
.case img {
  height: 200px;
}

完整的在GitHub上：https://github.com/wen98y/hello/tree/master/Bootstrap3