当前位置: 首页 >前端技术 > 使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续

前面我用 Bootstrap 和 HTML5 Boilerplate 搭建了一个项目基础框架,可是还只是空白一片,没有什么实际内容,现在可以开始向里面增加内容了。回到那个项目起点 index.html,一开始是给文档设置一个标题,就随随便便取一个好了:

<title>有标题文档</title>

真的取得很随意,不要太认真了,接下来添加以下页面主体内容:

  1. 一个包含 logo 和导航的 banner
  2. 一个包含主要内容的 main 元素
  3. 一个包含版权信息和社交链接的页脚

把在 index.html 中找到的下面这段预留文字删掉:

24 <!-- Add your site or application content here -->25 <p>Hello world! This is HTML5 Boilerplate.</p>

替换成下面的代码:

<header role="banner">  <nav role="navigation">  </nav></header><main role="main">  <h1>Main Heading</h1>  <p>Content specific to this page goes here.</p></main><footer role="contentinfo">  <p>Copyright © Company Name</p></footer>

一个最简单的基本页面结构已经有了,这里我使用了 header, main, footer 等元素,这些语义元素是 HTML5 规范增加的,已经得到现代浏览器的广泛支持,所以可以放心地使用,如果还停留在满屏 div 的时代,恐怕其他小伙伴都不愿意和我一起玩耍了,IE 8(及以下)不能识别这些元素,因而不能对这些元素应用样式,但是我的项目中由于引入了 Modeizr.js 脚本,从而使 IE8 可以支持这些元素,当然这还得建立在用户启用了 javaScript 的前提下,如果没有,那就比较糟糕了,不过这种情况少之又少,但也不能完全忽略,所以可以为没有启用 javaScript 的浏览器准备一些后备内容,比如,给出一个链接跳转至没有 HTML5 元素的版本。role 属性属于 WAI-ARIA 规范的 Landmark Roles/地标角色部分,旨在告诉用户代理这个元素扮演的角色,例如屏幕阅读器遇到包含 role="navigation" 的页面上的一个 HTML 元素,屏幕阅读器将知道此 HTML 元素用于导航。现在,我想要添加一个导航条,刚好 Bootstrap 有这个组件,因此我就把 Bootstrap 的示例代码直接搬过来了,以下是 header 部分代码:

<header role="banner">  <nav class="navbar navbar-default navbar-static-top" role="navigation"><div class="navbar-header">  <a class="navbar-brand" href="index.html">Project name</a></div><ul class="nav navbar-nav">  <li class="active"><a href="index.html">Home</a></li>  <li><a href="#">Link</a></li>  <li><a href="#">Link</a></li></ul>  </nav></header>

仔细分析上述代码不难发现 navbar 就是导航条组件的主要 class,navbar-default 是外观 class,另外还有一种外观 navbar-inverse 是一种反色的效果,如果都不喜欢,可以修改 CSS 文件把默认样式改掉(暂时不推荐这样做),也可以自己定义一个 navbar-awesome 类或者其它名字也行(awesome 在我的字典里就是高大上的意思),再添加上漂亮的样式;而 navbar-static-top 就是位置样式,表示静态位于顶部,随滚动条滚动,另外还有两个位置样式,navbar-fixed-top 和 navbar-fixed-bottom 顾名思义,就是固定于顶部和底部的意思了,完美地做到了外观样式与位置样式分离,这真是极好的!保存,在浏览器中打开后就像下面这样:

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续 _ JavaClub全栈架构师技术笔记

非常漂亮!为了给导航条增加响应式特性,我还得参考一下 Bootstrap 官网文档,导航条,所以再把 .navbar-header 修改如下:

<div class="navbar-header">  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>  </button>  <a class="navbar-brand" href="index.html">Project name</a></div>

data 属性是 HTML5 规范里增加的一个自定义属性的方式,data- 后面可以跟任意合法名字,任意合法值,推荐使用这种方式给 HTML 元素添加自定义属性,以避免和未来新增的属性命名冲突,同时,这样也能通过验证。

<div data-xxx="xxx">

data-toggle="collapse" 属性是 Bootstrap 的 collapse.js 插件定义的使用方式,所有 Bootstrap 插件都可以通过 data 属性 API 来使用,而 data-target 属性的值则表示了响应该插件功能的目标元素的 CSS 选择器,因此,使用这个插件只需要添加几个属性就可以了,一行 javaScript 代码都不需要写。根据 data-target 属性的值,我要再添加一个 class="navbar-collapse" 的元素来响应这个插件的功能,将已有的链接列表包装一个 div 并添加上需要的 class 就可以了:

<div class="navbar-collapse collapse">  <ul class="nav navbar-nav">...  </ul></div><!-- end .navbar-collapse -->

使用 Firefox 15+ 的响应式设计视图(Ctrl + Shift + M)打开页面并逐渐缩小窗口宽度,可以看到当页面宽度小于 768px 的时候(768px 是 Bootstrap 定义的小屏幕设备和超小屏幕设备之间的临界点),导航链接消失不见同时右上角多了一个按钮:

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续 _ JavaClub全栈架构师技术笔记

点击右上角按钮,导航链接以另外一种形式展现出来:

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续 _ JavaClub全栈架构师技术笔记

这样,一个炫酷的响应式导航条就算基本完成了!接着在导航下面添加一个图片轮播的效果,首先得准备好几张图片,OK,参考bootstrap官网的样例,将 main 元素里面的内容替换为以下代码:

<div class="carousel slide" data-ride="carousel" id="homepage-feature">  <ol class="carousel-indicators"><li class="active" data-target="#homepage-feature" data-slide-to="0"><li data-target="#homepage-feature" data-slide-to="1"><li data-target="#homepage-feature" data-slide-to="2"><li data-target="#homepage-feature" data-slide-to="3">  </ol>  <div class="carousel-inner"><div class="item active">  <img alt="picture" src="img/picture1.jpg"></div><div class="item">  <img alt="picture" src="img/picture2.jpg"></div><div class="item">  <img alt="picture" src="img/picture3.jpg"></div><div class="item">  <img alt="picture" src="img/picture4.jpg"></div>  </div><!-- end .carousel inner -->  <a class="left carousel-control" data-slide="prev" href="#homepage-feature"><span class="glyphicon glyphicon-chevron-left"></span>  </a>  <a class="right carousel-control" data-slide="next" href="#homepage-feature"><span class="glyphicon glyphicon-chevron-right"></span>  </a></div><!-- end .carousel -->

同样的,不需要写一行 javaScript 代码,就能很好地运行!

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续 _ JavaClub全栈架构师技术笔记

我用的是一张什么内容都没有的灰色图片,所以看起来是这样,也可以给每个 .item 添加一些描述性的文字:

<div class="item">  <img alt="..." src="...">  <div class="carousel-caption"><h3>...</h3><p>...</p>  </div></div>

接下来再添加一个三列的内容展示:

<div class="container">  <div class="row"><div class="col-sm-4">  <h2>Welcome!</h2>  <p>Suspendisse et arcu felis ...</p>  <p><a href="#">See our portfolio</a></p></div><div class="col-sm-4">  <h2>Recent Updates</h2>  <p>Suspendisse et arcu felis ...</p>  <p><a href="#">See what's new!</a></p></div><div class="col-sm-4">  <h2>Our Team</h2>  <p>Suspendisse et arcu felis ...</p>  <p><a href="#">Meet the team!</a></p></div>  </div><!-- end .row --></div><!-- end .container -->

这里使用了 Bootstrap 自带的12列响应式网格系统,.col-sm-4 表示一个内容块占据4列:

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续 _ JavaClub全栈架构师技术笔记

当窗口宽度小于 768px 的时候:

使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续 _ JavaClub全栈架构师技术笔记

响应式的布局,非常好!可是我并不想使用类似 .col-sm-x 之类的 class,因为如果哪天我不想一行放3列了,我想一行放2列,那我岂不是要把 .col-sm-4 改成 .col-sm-6?未完待续

资源列表

参考资料

Bootstrap Site Blueprints: Design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley

作者:by.Genesis
来源链接:https://www.cnblogs.com/xyzhanjiang/p/3804481.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。





本文链接:https://www.javaclub.cn/front/117358.html

标签:Bootstrap
分享给朋友:

“使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续” 的相关文章

HTML5结构标签 2022年05月16日 21:18:49
HTML常用标签及其用法总结 2022年05月17日 20:59:59
dart语法中list相关详解 2022年05月22日 09:44:25
html标签汇总 2022年06月06日 08:30:44
HTML5 video 视频标签使用介绍 2022年06月07日 08:00:00
Html/Css 2022年06月09日 22:55:41
html语义化标签 2022年06月10日 22:08:39
HTML 标签简写及全称 2022年06月10日 22:23:45
font标签的size属性 2022年06月15日 09:18:23