浅析Bootstrap中响应式布局的相关知识点

导读 本篇文章带大家聊聊Bootstrap实战,介绍一下Bootstrap的响应式布局,希望对大家有所帮助.....
本文带大家聊聊Bootstrap实战,介绍一下Bootstrap希望对大家有所帮助!

前端(vue)入门精通课程:入学

响应布局是一个网站可以与多个终端兼容,而不是为每个终端制作一个特定的版本。这个概念诞生于解决移动互联网浏览问题。

导航栏和轮播在大多数网站的头部占很大比例,尤其是导航栏,起着网站地图的作用。

在响应布局中,导航栏需要根据终端屏幕的大小显示不同的样式。

一、知识点

1.1 导航栏

官方解释:导航条是在您的应用程序或网站上作为导航页面的响应性基本组件。它们可以在移动设备上折叠(并且可以打开和关闭),并在视图上(viewport)当宽度增加时,逐渐成为水平展开模式。

1.1.1 基础导航栏

使用 Bootstrap 以前,习惯用 <ul> <li> 构建导航栏。相关建议:《bootstrap教程》】

<!--代码部分--> <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 标签属性的目的是使标签语义化,方便屏幕阅读器识别,也方便特殊人群浏览。

1.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>

1.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>

效果图:

1.2 轮播

图片轮播是网站的重要组成部分之一,常用于播放活动广告或企业宣传图片,有时幻灯片Bootstrap 中间的轮播效果是由 JavaScript 插件 Carousel 来实现的。

1.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>

效果图:

1.2.2 进阶的轮播

一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能,别担心,这些 Bootstrap 通通都有!

1.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" 即可。

1.2.2.2 添加文字

在轮播图片 <img> 在元素下添加样式 carousel-caption<div>,存储在里面的文字可以在轮播上正确显示。

<!--代码部分--> <div class="carousel-caption">     <h5>晚上总是下雨</h5> </div>
1.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。

更多关于bootstrap可访问的相关知识:bootstrap基础教程!

以上是分析Bootstrap请更多关注中响应式布局相关知识点的详细内容php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-09-09 18:00:24

猜你喜欢

最新文章