Bootstrap学习

后台页面的设计准备使用Bootstrp，学习之。

中文文档：bootstrap中文文档，需要的样式、组合、js都可以在文档中获取。

另一个网站，查找功能更方便：Bootstrap 教程

在慕课上看了视频
基于bootstrap的网页开发
制作了一个简单的页面，源码网上都有
预览：现代浏览器博物馆

---

总结几个问题：

1.样式文件的引用：

放在head中：
<link href="css/bootstrap.min.css" rel="stylesheet">

放在body底部
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.样式设置，获取元素

取class:  .carousel {
                height: 500px;
                background-color: #000000;
                margin-bottom: 60px;
            }

取网页元素:  body {
                padding-top: 50px;
                padding-bottom: 50px;
            } 

取id:  #summary-container{
                text-align: center;
            }  

组合获取（中间用空格）：
        .carousel .item img {
                width: 100%;
            }

3.菜单定位js

$(document).ready(function(){
    $("#demo-navbar .dropdown-menu a").click(function(){
        var href =$(this).attr("href");        
        $("#tab-list a[href='"+ href+"']").tab("show");
    });
});

其中div ： class=”collapse navbar-collapse” 的 id=”demo-navbar” 要与 button中data-target=”#demo-navbar”一致。

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar" 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 class="navbar-brand" href="#">现代浏览器博物馆</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="demo-navbar">
    <ul class="nav navbar-nav">
        <li class="active">
            <a href="#">综述 </a>
        </li>
        <li>
            <a href="#">简述</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header">浏览器</li>
                <li>
                    <a href="#tab-chrome">Chrome</a>
                </li>
                <li>
                    <a href="#tab-firefox">Firefox</a>
                </li>
                <li>
                    <a href="#tab-opera">Opera</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">浏览器2</li>
                <li>
                    <a href="#tab-safari">Safari</a>
                </li>
                <li>
                    <a href="#tab-ie">IE</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" data-toggle="modal" data-target="#about">关于</a>
        </li>
    </ul>
</div>

匹配的标签页，js显示中执行显示的id=”tab-list”

<ul class="nav nav-tabs" role="tablist" id="tab-list">
    <li class="active">
        <a href="#tab-chrome" data-toggle="tab">Chrome</a>
    </li>
    <li>
        <a href="#tab-firefox" data-toggle="tab">Firefox</a>
    </li>
    <li>
        <a href="#tab-safari" data-toggle="tab">Safari</a>
    </li>
    <li>
        <a href="#tab-opera" data-toggle="tab">Opera</a>
    </li>
    <li>
        <a href="#tab-ie" data-toggle="tab">IE</a>
    </li>
</ul>