学习日记-第一个Bootstrap页面总结

Bootstrap 页面设计

导航条的实现:

进入中文网中复制案例的代码

nav 添加 .navbar-fixed-top 类让导航条固定

div 添加 .container 或 .container-fluid 容器让导航条居中

nav 添加 .navbar-inverse 类可以改变导航条的外观, 变成黑色显示

css 样式中添加 body{ padding-top:70px } ( 导航条默认的高度是50px )


下拉菜单 dropdown

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Chome</a></li>
            <li><a href="#">Firetor</a></li>
            <li><a href="#">Satan</a></li>
            <li><a href="#">Opera</a></li>
            <li><a href="#">IE</a></li>
          </ul>
        </li>

滚动广告 Carousel  ( 例子中复制即可 )

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="./images/chrome-big.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Chrome</h1>
          <p>这是第一个轮播图,还是很好用的<code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">点击下载</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="./images/firefox-big.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Firefox</h1>
          <p>这是第二个轮播图,还是很好用的<code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">点击下载</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="third-slide" src="./images/opera-big.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Opera</h1>
          <p>这是第三个轮播图,还是很好用的<code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">点击下载</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


解决图片图片不统一:

    样式中添加  .carousel{ height: 500px; background-color: #000 }  

            .carousel .item{ height:500px; background-color:#000 }

            .carousel img{ width:100% }




栅格系统布局  columns:

    <div class="container" id="summary-container">
  <div class="row">
    <div class="col-lg-4">
      <img class="img-circle" src="./images/chrome-logo.jpg" alt="Generic placeholder image" width="140" height="140">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
      <img class="img-circle" src="./images/firefox-logo.jpg" alt="Generic placeholder image" width="140" height="140">
      <h2>Heading</h2>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
      <img class="img-circle" src="./images/opera-logo.jpg" alt="Generic placeholder image" width="140" height="140">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
  </div>
 </div>



标签页 Tabs:


模态框 Modal:


标签栏显示:

    <script type="text/javascript">
  $("#demo-navbar .dropdown-menu a").click(function(){
    // alert(123);
    var href = $(this).attr("href");
    // alert(href);
    $("#tab-list a[href='"+ href +"']").tab("show");
    // alert(a);
  })
</script>