乐趣区

关于bootstrap:Bootstrap实战-响应式布局

jiezi

一、介绍

响应式布局就是一个网站可能兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决挪动互联网浏览而诞生的。

导航栏与轮播在大部分网站的头部占很高的比重，特地是导航栏，扮演着网站地图的角色。

在响应式布局中，要求导航栏可能依据终端屏幕大小显示不同的款式。

二、知识点

2.1 导航栏

官网解释：导航条是在您的利用或网站中作为导航页头的响应式根底组件。它们在挪动设施上能够折叠（并且可开可关），且在视口（viewport）宽度减少时逐步变为程度开展模式。

2.1.1 根底导航栏

应用 Bootstrap 之前，习惯用 <ul> + <li> 来结构一个导航栏。

<!-- 代码局部 -->
<style>
.navigation-past{list-style: none;}
.navigation-past>li{
    float: left;
    padding: 8px;
}
.navigation-past>li>a{
    text-decoration: none;
    color: #000;
}
.active-past{background: #E7E7E7;}
</style>
<ul class="navigation-past">
       <!-- 选中 -->
    <li class="active-past"><a href="#">Navigation First</a></li>
    <li><a href="#">Navigation Second</a></li>
    <li><a href="#">Navigation Third</a></li>
    <li><a href="#">Navigation Fourth</a></li>
    <li><a href="#">Navigation Fifth</a></li>
</ul>

效果图：

应用 Bootstrap 的话，便是在相熟的这个结构上加上一些润饰即可。首先在 <ul> 里面套一层 <div>，并加上款式 navbar navbar-default；而后给外面的 <ul> 加上款式 nav navbar-nav；最初，给选中的局部加上款式 active。一个最根本的 Bootstrap 导航便实现了。

<!-- 代码局部 -->
<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li><a href="#">Navigation Fifth</a></li>
    </ul>
</div>

效果图：

这里在最外层加了一个 role="navigation" 的属性，这里是 HTML5 的标签属性，目标是让标签语义化，不便屏幕阅读器对其进行辨认，同时也是为了不便特殊人群浏览。

2.1.2 进阶的导航栏

在浏览一些官方网站时，首先映入眼帘的是左上角显明的公司 LOGO 和夸大的轮播，Bootstrap 在导航中预留了 LOGO 的地位。应用办法是在外层 <div> 外面加一个款式 navbar-header 的 <div>，这个 <div> 内再加一个款式 navbar-brand 的 <a> 元素。

<!-- 代码局部 -->
<div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                        <a href="#" class="navbar-brand">LOGO</a>
            </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li><a href="#">Navigation Fifth</a></li>
    </ul>
</div>

效果图：

有的时候一级导航是不够的，须要搭配二级导航展现更多的内容。应用办法：首先在须要加二级导航的 <li> 元素中增加款式 dropdown，<a> 元素中增加款式 dropdown-toggle 和属性 data-toggle="dropdown"；而后在 <li> 外面 <a> 上面在放一个 <ul> + <li> 组合，<ul> 标签增加款式 dropdown-menu。

<!-- 代码局部 -->
<div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                        <a href="#" class="navbar-brand">LOGO</a>
            </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Navigation Fifth
                <ul class="dropdown-menu">
                    <li><a href="#">Sub-Navigation First</a></li>
                    <li><a href="#">Sub-Navigation Second</a></li>
                    <li><a href="#">Sub-Navigation Third</a></li>
                </ul>
            </a>
        </li>
    </ul>
</div>

效果图：

这里又呈现新的属性 aria-haspopup="true" aria-expanded="false"，同样的，这也是 HTML5 新加的属性，这里援用 Segmentfault 社区姜中秋的答复。

aria-haspopup: true 示意点击的时候会呈现菜单或是浮动元素；false 示意没有 pop-up 成果。aria-expanded: 示意开展状态。默认为 undefined, 示意以后开展状态未知。其它可选值：true 示意元素是开展的；false 示意元素不是开展的。

平时所见到的下拉框个别都有一个向下的箭头符号 ▼，同样的，在 Bootstrap 中也反对这一成果，只不过须要引入她自带的字体库 Glyphicons 字体图标。

官网介绍：Bootstrap 包含 250 多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 个别是免费的，然而他们的作者容许 Bootstrap 收费应用。为了表示感谢，心愿你在应用时尽量为 Glyphicons 增加一个 友情链接。

应用办法：新建一个 <span> 元素，而后在外面加上款式 glyphicon glyphicon-triangle-bottom。

Glyphicons 字体图标应用示例：

<!-- 代码局部 -->
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Navigation Fifth <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
        <ul class="dropdown-menu">
            <li><a href="#">Sub-Navigation First</a></li>
            <li><a href="#">Sub-Navigation Second</a></li>
            <li><a href="#">Sub-Navigation Third</a></li>
        </ul>
    </a>
</li>

效果图：

留神：

  • Glyphicons 字体图标和文本之间增加一个空格，不然会影响款式（padding）的正确显示。
  • 服务器须要正确增加相应的 MIME 类型，否则加载字体会报 404 谬误。

另外这里的箭头也能够应用 Bootstrap 自带的款式 caret 来实现，这里的箭头是用 CSS 实现了，应用办法：<span class="caret"></span>。

2.1.3 响应式导航栏

在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个挪动设施优先也是反对这样的需要的，响应式导航的应用的办法比拟固定，首先在导航题目 <div class="navbar-header"> 内加上一段固定写法的代码；而后在须要在小屏时折叠的 <ul> 元素外包一层款式 collapse navbar-collapse 的 <div> 元素，并给这个元素加上任意名称的 ID，例如：id="navigation-collapse"；最初在响应式按钮 <button> 元素上加上 data-target 属性指向要折叠的内容 id，例如：data-target="#navigation-collapse"。

<!-- 代码局部 -->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
                        <!-- 以下为固定写法，用到的时候复制粘贴即可 -->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="navigation-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Navigation First</a></li>
            <li><a href="#">Navigation Second</a></li>
            <li><a href="#">Navigation Third</a></li>
            <li><a href="#">Navigation Fourth</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Navigation Fifth <span class="caret"></span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sub-Navigation First</a></li>
                        <li><a href="#">Sub-Navigation Second</a></li>
                        <li><a href="#">Sub-Navigation Third</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

效果图：

2.2 轮播

图片轮播是网站的重要组成部分之一，罕用来放流动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播成果是由 JavaScript 插件 Carousel 来实现的。

2.2.1 根底轮播

轮播的应用办法也是绝对固定的，非凡场景按需要批改即可。须要留神的是须要给最外层 <div> 元素加上一个 id，并在小圆点出指向这个 id。

<!-- 代码局部 -->
<div id="my-banner" class="carousel">
    <!-- 搁置小圆点，点击能够切换轮播 -->
    <ol class="carousel-indicators">
        <!-- 加上款式 active 示意默认显示的轮播，data-slide-to="0" 属性示意显示轮播的程序 -->
        <li data-target="#my-banner" data-slide-to="0" class="active"></li>
        <li data-target="#my-banner" data-slide-to="1"></li>
    </ol>
    <!-- 这里搁置轮播显示的图片 -->
    <div class="carousel-inner">
        <!-- 加上款式 active 示意默认显示的图片 -->
        <div class="item active">
            <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
        </div>
        <div class="item">
            <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
        </div>
    </div>
</div>

效果图：

2.2.2 进阶的轮播

一个残缺的轮播应具备自动播放、点击切换、悬浮进行、外加阐明文字性能，别放心，这些 Bootstrap 统统都有！

2.2.2.1 主动播发

最外层 <div> 元素增加属性 data-ride="carousel" 和款式 slide（使轮播播放更平滑），如：<div id="my-banner" class="carousel slide" data-ride="carousel">。此时轮播的自动播放工夫为 5 秒（默认），如想扭转此值设置属性 data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置 data-interval="3000"。另外轮播是默认悬浮进行播放的（data-pause="hover"），如想禁止悬浮播放设置属性 data-pause="false" 即可。

2.2.2.2 增加文字

在轮播图片 <img> 元素上面增加款式 carousel-caption 的 <div>，外面寄存文字便可正确显示在轮播下面。

<!-- 代码局部 -->
<div class="carousel-caption">
    <h5> 夜里总是下雨 </h5>
</div>
2.2.2.3 点击切换

在轮播图片上面搁置两个 <a> 元素，href 指向轮播 id，增加属性 data-slide="prev/next 向前 / 向后"。

<!-- 代码局部 -->
<!--<a> 元素的 href 指向轮播 id-->
<a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-banner"  data-slide="next" role="button">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

轮播代码示例：

<!-- 代码局部 -->
<div id="my-banner" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
    <!-- 搁置小圆点，点击能够切换轮播 -->
    <ol class="carousel-indicators">
        <!-- 加上款式 active 示意默认显示的轮播，data-slide-to="0" 属性示意显示轮播的程序 -->
        <li data-target="#my-banner" data-slide-to="0" class="active"></li>
        <li data-target="#my-banner" data-slide-to="1"></li>
    </ol>
    <!-- 这里搁置轮播显示的图片 -->
    <div class="carousel-inner">
        <!-- 加上款式 active 示意默认显示的图片 -->
        <div class="item active">
            <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
            <div class="carousel-caption">
                <h5> 夜里总是下雨 </h5>
            </div>
        </div>
        <div class="item">
            <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
            <div class="carousel-caption">
                <h5> 后除揭示君の世界 </h5>
            </div>
        </div>
    </div>
    <!--<a> 元素的 href 指向轮播 id-->
    <a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#my-banner"  data-slide="next" role="button">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

效果图：

三、实战

试着组合栅格零碎 + 导航栏 + 轮播布局一个响应式页面。

电脑端效果图：

挪动端效果图：

其实实现这样一个成果很简略，首先看一下栅格参数如何在多种屏幕设施上工作的。

在新闻和资讯的盒子上同时加上款式 col-xs-*，col-sm-* 和 col-md-*，小屏时（屏幕宽度 < 992px）col-xs-*，col-sm-* 失效，col-md-* 生效；大屏时（屏幕宽度 ≥ 992px）col-md-* 失效，col-xs-*，col-sm-* 生效。例如：<div class="col-xs-12 col-sm-12 col-md-6"> 新闻 </div><div class="col-xs-12 col-sm-12 col-md-6"> 资讯 </div>。

演示地址：https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html，源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation。

版权申明

本博客所有的原创文章，作者皆保留版权。转载必须蕴含本申明，放弃本文残缺，并以超链接模式注明作者后除和本文原始地址：https://blog.mazey.net/2575.html

（完）

退出移动版