div布局之面向对象

栗子之导航条（navbar）

http://www.runoob.com/try/try2.php?filename=bootstrap-using-glyphicons-navbar

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Project name</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">
                            <span class="glyphicon glyphicon-home"></span> Home
                        </a>
                    </li>
                    <li >  
                        <a href="#shop">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Shop
                        </a>
                    </li>
                    <li>
                        <a href="#support">
                            <span class="glyphicon glyphicon-headphones"></span> Support
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

2.模块化思想（主要是div的使用）

3. div 之间的嵌套

4. 以最小单位为对象的面向盒子对象思想（对其设置属性：padding，margin- border 。。。。。。）