兴旺财速啃H5框架的Bootstrap(四)

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

于未收拾的网页,要做成自适应就出接触娱乐大了….
例如下面这种版式的页面….

 Bootstrap 1

 

对如此的网站,要做成自适应,那你得差不多消费点精力了,当然我不说话这。。。

 

因而这边肯定是针对性那种“列好规律”的网站,例如cnblogs首页的版式,分左,中,右

 Bootstrap 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;
  }
}

此我便非失详细考虑各一个配备情况了。

整案例来一个:

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

一部分人意识点有点问题:

Bootstrap 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>

询问功能:《Bootstrap猛点这里》

深信不疑你早就掌握从适应是怎么回事了吧,是免是决不框架为能够去描绘了呢?
如果大的话,接受留级吧~~~,你的题目是免是在:不自学、不总结、不扎实、只拘留不练、不…只ctrl+v,不查手册只度娘…
……………………………….不思量说而了。。。

今天over~~~

相关文章