景气财速啃H5框架的Bootstrap(三)

博天没写了,继续走由

每当达成同样篇<<盛财速啃H5框架的Bootstrap(二)>>中都将CSS引入到页面中,接下开始写页面。

先是有些问题使优先处理了,问什么你要学bootstrap?
流行?写网页快?还是其它什么的?说实话,如果写页面很在行的总人口(牛人),根本无见面因此任何框架写,为什么呢,它们不过臃肿了,谁写一个页面会管其具备的CSS都应当据此上,所有的接近都定义及吧?所以广大代码对于页面来说还是剩下的,还吓上线后,引入的且是资源库,如果你产生代码精简强迫症,那估计您要是又写(覆盖)一些东西了(注明:实际自己大部分日子还在作后台,前台也止是小懂,高手勿喷,有出口得反常的地方,大胆指正,虚心学习。)

咦是起适应?

本身深信这也是你的目的,要举行一个自适应之网站,手机(微小设备)、平板(小设备)、一般电脑(中型设备)、大显示器(大型设置)等还能够非常好的亮,现在般都是之类两种植艺术

第一种:不同装备各一效仿

第一想开的凡辛苦,没道,像一些网站(比如商城),网站同手机显示的样式或内容产生不行怪区别,做同样效?行也?…
想到这里,你必很只能屈服了,好吧,这种自我莫多说。

第二种植:所有设备都同仿照

这种你必看到就欣然了,但这种网站要扣页面数据来,不是兼具类型的网站还入,现在CMS系统这样做的可比多。

想开是从适应,所先以形容CSS容器的时刻不克把宽度固定好,那怎么收拾?肯定百分较呀。

本身怎么看废话有点多了,打了这么多字….开关系,这里一定就说第二种状态的

做一个于适应的领航,直接扣代码:

<!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”
告诉浏览器就是一个导航容器。然后以中定义一个container-fluid,名义上吗非固定(会生成)容器,1411执代码:

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

徒定义了内边距,外边距自动,说明其的增长率是父容器的100%,自然会以浏览器窗口大小变化而变化了。

压缩窗口看看效果:

图片 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

 

导航栏有矣,接下的一些自己以介绍如何勾勒主体有。

 

发问题大胆留言,虚心学习~~~

相关文章