码迷,mamicode.com
首页 > 其他好文 > 详细

div布局之面向对象

时间:2017-09-22 22:31:29      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:header   set   art   init   query   content   icon   support   blank   

  1. 栗子之导航条(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布局之面向对象

标签:header   set   art   init   query   content   icon   support   blank   

原文地址:http://www.cnblogs.com/yangwu-183/p/7577066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!