旺财速啃H5框架之Bootstrap(四)

上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下去搭建内容框架….

对于不收拾的网页,要做成自适应就有点玩大了….
例如下边那种版式的页面….

 图片 1

 

对于那样的网站,要做成自适应,那您得多花点精力了,当然小编不讲这一个。。。

 

故此这边肯定是对那种“列很规律”的网站,例如cnblogs首页的版式,分左,中,右

 图片 2

 

是因为中夏族民共和国守旧方式版本,或习惯怎么的,很多事物都讲对称性,所以大约全体网站都以很规律的,说多了,直接上(那里自个儿只写首要CSS)

<div class="container">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>

Container定义了三个器皿,看相关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;
  }
}

在768px上述,宽度固定750px

在992px上述,宽度固定970px

在1200px以上,宽度固定1170px

能够看出在处理器上容器宽度都以固定的

 

假设您不想做那种稳定宽度,而是全屏的页面,那么定义container容器就十三分了,外面的容器宽度就得是比例样式。

下边笔者创新:

<div class="container wrap">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>

在意:选取的是CSS重写(覆盖),引入CSS的时候一定要放权bootstrap.min.css的背后

自身那里就径直写在页面上了,看本身写的CSS样式:

.wrap{
  width:100%;  /* 覆盖container的宽度 */
}
.wrap .left{
  width:14%;
  margin-right:1%;
}
.wrap .center{
  width:65%;
}
.wrap .right{
  margin-left:1%;
  width:19%;
}
/* 最大宽度768的设备,只显示中间,其它情况自己添加,注意先后顺序。 */
@media (max-width: 768px) {
  .wrap .center{
     width:100%;
  }
  .wrap .left,.wrap .right{
     display:none;
  }
}

此间自个儿就不去详细考虑每1个设施状态了。

完全案例来二个:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">
    .col{min-height: 580px; float: left;}
    .left,.right{background-color: #e6e6e6;}
    .center{background: #000;}
    .row{margin: 0;}
    .wrap{
      width:100%;  /* 覆盖container的宽度 */
    }
    .wrap .left{
      width:14%;
      margin-right:1%;
    }
    .wrap .center{
      width:65%;
    }
    .wrap .right{
      margin-left:1%;
      width:19%;
    }
    /* 最大宽度768的设备,只显示中间 */
    @media (max-width: 768px) {
      .wrap .center{
         width:100%;
      }
      .wrap .left,.wrap .right{
         display:none;
      }
    }

    </style>
</head>
<body>
<nav 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="#example-navbar-collapse">
                切换导航



            </button>
            <a class="navbar-brand active" href="javascript:;">教程</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:;">iOS</a></li>
                <li><a href="javascript:;">SVN</a></li>
                <li class="dropdown">
                    <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;">jmeter</a></li>
                        <li><a href="javascript:;">EJB</a></li>
                        <li><a href="javascript:;">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container wrap">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>
</body>
</html>

询问功效:《猛点那里

变更窗口大小看效果

假若您想做得进一步到位,页面缩放后版式尤其协调,你能够更详实的指向差别装备写不现的体裁,但要注意先后顺序哦~~~

 

OK,框架搭建好了,那几个框架只是是“全体框架”,就好比房子的地基、梁柱之类的,那么接下去向里面插入“内容框架”,内容框架当然是直接或直接与内容有关联的框架

当大框架没有一定宽度的意况下,里面包车型地铁内容框架宽度能定点宽度么?要铭记,外面包车型地铁框架在并未大幅度的情事是会被内部的始末影响的(尤其指浮动成分),块成分的话不用设置宽度,就让它暗中同意为父容器的宽窄就OK。

某个人意识下边有点难点:

图片 3

压缩后,出现下拉领航会把下部给抵下去。。。  
那种问题自个儿都能消除的吧,不是大题材,小编也只可以说,“你”太懒了,那样学东西可充裕。。。 
 OK~~~ ,小编有点调整一下,看上面完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">
    .col{min-height:580px; float: left;}
    .left,.right{background-color: #e6e6e6;}
    .center{background: #000;}
    .row{margin: 0;}
    .wrap{
      width:100%;  /* 覆盖container的宽度 */
    }
    .wrap .left{
      width:14%;
      margin-right:1%;
    }
    .wrap .center{
      width:65%;
    }
    .wrap .right{
      margin-left:1%;
      width:19%;
    }
    /* 最大宽度768的设备,只显示中间 */
    @media (max-width: 768px) {
      .wrap .center{
         width:100%;
      }
      .wrap .left,.wrap .right{
         display:none;
      }
      .container-fluid{
          position: relative;
      }
      .navbar-collapse{
          position: absolute;
          width: 100%;
          background-color: #FFF;
      }
    }
    </style>
</head>
<body>
<nav 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="#example-navbar-collapse">
                切换导航



            </button>
            <a class="navbar-brand active" href="javascript:;">教程</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:;">iOS</a></li>
                <li><a href="javascript:;">SVN</a></li>
                <li class="dropdown">
                    <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;">jmeter</a></li>
                        <li><a href="javascript:;">EJB</a></li>
                        <li><a href="javascript:;">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container wrap">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>
</body>
</html>

询问功效:《猛点那里

信任你已经领悟自适应是怎么回事了呢,是或不是毫无框架也能去写了吧?
要是那么些的话,接受留级吧~~~,你的标题是还是不是在乎:不自学、不总计、不踏实、只看不练、不…只ctrl+v,不查手册只度娘…
……………………………….不想说您了。。。

今天over~~~

相关文章