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

众多天没有写了,继续走起

在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中早已把CSS引入到页面中,接下去伊始写页面。

先是某个难题要先拍卖了,问怎么你要学bootstrap?
流行?写网页快?依然其余什么的?说实话,假诺写页面很在行的人(牛人),根本不会用任何框架写,为啥吗,它们太臃肿了,什么人写贰个页面能把它拥有的CSS都应有用上,全部的类都定义上呢?所以广大代码对于页面来说都以剩下的,幸好上线后,引入的都以财富库,若是您有代码精简性心理障碍,那估摸你要重写(覆盖)一些东西了(注明:实则本人超越51%时日都在搞后台,前台也只是略懂,高手勿喷,有讲得语无伦次的地方,大胆指正,虚心学习。)

哪些是自适应?

本身深信不疑那也是您的指标,要做3个自适应的网站,手机(微小设备)、平板(小设备)、一般电脑(中型设备)、大显示器(大型设置)等都能很好的来得,未来貌似都以之类三种格局

率先种:不一致装备各一套

第三想开的是麻烦,无法,像一些网站(比如商城),网站跟手提式有线电话机展现的体裁或内容有非常的大分别,做一套?行吧?…
想到那里,你一定很只能屈服了,好吧,那种自笔者不多说。

第贰种:全体设备全一套

那种你肯定看到就欢跃了,但那种网站要看页面数据来,不是有所项目标网站都合乎,现在CMS系统那样做的相比多。

想到是自适应,所先在写CSS容器的时候无法把宽度固定死,那如何是好?肯定百分比呀。

作者怎么觉得废话有点多了,打了这么多字….开干,那里一定只说第二种情景的

做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>
</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>
</body>
</html>

翻开效果,《猛点那里

说明:

Nav标签定义导航,role=”navigation”
告诉浏览器那是3个导航容器。然后在里边定义三个container-fluid,名义上为不固定(会扭转)容器,1411行代码:

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

只定义了内边距,外边距自动,表明它的宽度是父容器的百分百,自然会随浏览器窗口大小变化而生成了。

压缩窗口看看效果:

Bootstrap 1

左边栏目图标减弱到早晚大小后就会彰显,注重庆大学代码4022行:

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

若果它的宽度当先768就隐藏了,反之展现。

点击图标展现下拉子导航功能,那些本来是js的职能了。

 

弄清一下:自适应其实正是在转移浏览器(设备)大小的事态下,应用分裂的CSS样式,把范围大的写上边,特殊的写上边,前边的体制覆盖前边的,看CSS源码里面也有雅量的层级关系的概念(比如.navbar-nav
.open
.dropdown-menu),那就表示dropdown-menu类父级里面必须得有open类,open父级里面必须得有navbar-nav才行,要不然并卵。也就象征很多写法要按须求来。

 

上面的案例去看一下它的选拔样式,不是多多益善啊,看得头都晕,哈哈,这正是框架,把不一致的设备考虑进去了,自然代码就多呀。

 

有没有人想到说劳驾,自身写得了,对啊,高手都以和谐写的~~~,但框架这时给我们的便宜就只映今后进程上了,写网页快。

 

回头作者有空从0写一个自适应的CSS,只写一些,让有些童鞋知道是怎么回事就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>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">教程</a>
        </div>
    <div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">iOS</a></li>
      <li><a href="#">SVN</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Java <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">jmeter</a></li>
          <li><a href="#">EJB</a></li>
          <li><a href="#">Jasper Report</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
          <li class="divider"></li>
          <li><a href="#">另一个分离的链接</a></li>
        </ul>
      </li>
    </ul>
  </div>
  </div>
</nav>
</body>
</html>

查询功能:《猛点这里

固化作用主要代码3956行:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

position: fixed;      // 绝对浏览器进行相对定位

固然你对固定不熟悉,点这里看看。

 

Bootstrap框架导航栏就写这么点,想看越多详细的导航栏效果,请看:http://noob.d8jd.com/noob/5/123.html

 

导航栏有了,接下去的局部本身将介绍怎么着写主体部分。

 

Bootstrap,非常大胆留言,虚心学习~~~

相关文章