Bootstrap 使用

其实自己写demo更多的时候都是手写css的，因为可以自己定制，自由控制且可以随便折腾，但有时候很多流水工厂式的样式写起来就太无趣了，所以还是用Bootstrap吧……

基本设置

首先新建一个Html页面，把Bootstrap的样式与脚本引用塞进去：

这里有个问题，Bootstrap4.0以上是彻底不支持IE8以下的浏览器的，最新版已经把IE9抛弃了；= =

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap example</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

因为Bootstrap是JQuery依赖的，所以需要在脚本中引入JQuery，要注意的是，Bootstrap3.3.6版本以下是不支持JQuery3的，只能用JQuery2.

container设置

引入之后，在页面上插入container容器：

<body>
    <div class="container">
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

在这里是使用container还是container-fluid，主要看页面需求，两者区别在于：container-fluid是一个全宽的容器，使用整个宽度，而container则相当于一个margin：auto；的响应式的静态宽度div盒子；
两者的css设置：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

标题与导航栏

标题与导航栏都可以写在header里：

<div class="container">
        <header>
            <h1>Lorem ipsum dolor sit amet.</h1>
            <nav class="navbar navbar-inverse">
                <div class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </header>
    </div>

在这里，导航使用nav标签创建的，Bootstrap里的导航条称为 navbar，navbar默认样式为白色，.navbar-inverse为颜色反白，可以得到黑色的导航条，需要其他颜色可以自己手动设置；

在 .navbar-collapse 中写入导航栏， .nav表明该ul为一导航栏，各li为导航类目；.navbar-nav说明是用于 navbar 中的导航;
在li中设置.active,可以在JavaScript中控制鼠标click或者mouseover效果；
例如：

        .active{
            color:#f0ad4e;
            background:#f95c1d;
            box-shadow: 1px 0 15px 2px #ffe34f inset;
            border:1px solid rgba(250, 250, 186, 0.7);
        }

        const tabList=document.querySelectorAll("ul > li");
        function changeTab() {
            for (var i = 0; i < tabList.length; i++) {
                tabList[i].classList.remove("active");
                if(tabList[i]===this){
                    tabList[i].classList.add("active");
                }else{
                    tabList[i].classList.remove("active");
                }
            }
        }
        tabList.forEach(function(el){el.addEventListener('click',changeTab);
    });

移动端设置

.navbar-collapse 是说在视口的宽度小于 768px 的时候，将导航变成垂直方向。
对比：

1280px

750px

如果想要获得移动端的三明治型显示，需要额外进行修改：

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" 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="#">Brand</a>
</div>

这里<a>标签是左侧的链接，button为右侧的三明治导航按钮，span为导航按钮的设计构成（三条白线和边框……）；
然后要完成点击三明治导航菜单的显示/隐藏，这时需要用到<button>里的data-target="#navbar-menu"，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

@media screen and (max-width: 768px) {
            #mainNav{
                display: none;
            }
        }

const navbutton=document.getElementById("showoff");
        const mainNav=document.getElementById("mainNav");
        function showOff() {
            if (mainNav.style.display==="none") {
                mainNav.style.display="block";
            } else {
                mainNav.style.display="none";
            }
        }
        navbutton.addEventListener('mouseover',showOff);
        navbutton.addEventListener('click',showOff);

其中showoff 和mainnav分别是给button 和div .navbar-collapse添加的id；

页面主体

页面主体如果是传统样式，符合栅格化，则使用栅格化样式最快捷；
栅格样式具体可以参阅Bootstrap文档；

以两栏布局为例：

        <section>
            <div id="content" class="row-fluid">
                <div class="col-md-9">
                    <h2>Main Content Section</h2>
                    <p>lorem*2</p>
                </div>
                <div class="col-md-3">
                    <h2>Sidebar</h2>  
                </div>
            </div>
        </section>

然后设置侧边栏，侧边栏也可以设置为导航nav；
使用nav-tabs和nav-stacked设置导航栏外观；

<div class="col-md-3">
    <h2>Sidebar</h2>
        <ul class="nav nav-tabs nav-stacked">
            <li><a href='#'>Another Link 1</a></li>
            <li><a href='#'>Another Link 2</a></li>
            <li><a href='#'>Another Link 3</a></li>
        </ul>  
</div>

这样主题搭建就完成了。

ref:
20分钟打造你的Bootstrap站点;
Bootstrap 中文文档;

Bootstrap 使用