css-bootstrap

CSS概览

基本的bootstrap包含三个文件，引入到html页面中

    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
#bootstrap.js要在jquery.js之后引入

　　

网格系统

bootstrap网格系统把width=100%分成12等分，显示大小从小到大有xs(<=768px) sm（750px） md(970px) lg(1170px)。

<div class="col-xs-6 col-md-3"> 的意思是在超小屏幕上占6列（屏幕的一半），中间屏幕上占3列（屏幕的1/4）。

bootstrap网格系统遵循以下规则：

• .row必须放在.container里
• .row用于创建水平组
• .col-xx-num应该是.row的直接子元素
• .col-xx-num是预定的网格类，可以快速创建网格布局

Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

　　

导航元素-nav

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <ul class="nav nav-pills nav-justified">
                <li class="active"><a href="#1">menu1</a> </li>
                <li><a href="#2">menu1</a> </li>
                <li><a href="#3">menu1</a> </li>
                <li><a href="#4">menu1</a> </li>
            </ul>
        </div>
    </div>
</div>
#在大型屏幕上占据12列
#使用无序列表，使用pills胶囊式视觉方式，使用justified与父元素等宽（12列）
#第一个列表使用active，就是默认激活

　　

导航元素-navbar

<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">运维平台</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#1">menu1</a> </li>
                <li><a href="#2">menu1</a> </li>
                <li><a href="#3">menu1</a> </li>
                <li><a href="#4">menu1</a> </li>
            </ul>
        </div>
    </div>
</div>
#这是基础导航条
#首先外部是一个容器（div），使用类名“navbar”和“navbar-default”，用于控制导航条的样式
#下面是导航标题，其通过“navbar-header”和“navbar-brand”来实现。
#下面是一个导航列表，在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

　　

<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-responsive-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">运维平台</a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#1">menu1</a> </li>
                <li><a href="#2">menu1</a> </li>
                <li><a href="#3">menu1</a> </li>
                <li><a href="#4">menu1</a> </li>
            </ul>
        </div>
    </div>
</div>
#这是响应式导航条，可在窄屏幕中折叠导航条到一个按钮
-----------------
#导航头部
#在navbar-header里面添加一个button。
#navbar-toggle类是导航按钮，设置button元素为导航组件的切换
# data-toggle="collapse”把所有导航条都折叠的效果
#data-target指向折叠区块，就是下面的导航条
#三个icon-bar是显示在按钮内部的横条
------------------
#导航条
#要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中
#屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开
#这个div中，就是一个ul导航列表