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 。。。。。。）

巴特西

div布局之面向对象

最新文章

热门文章