闲暇之余想要学习下booterstrap,正好在一个设计网站看到了一些有响应式布局的设计图。已经将纯css写过一遍首页,现在着手使用booterstrap进行改造。首先了解下修改booterstrap导航需要用到哪些类,样式后期再改。需要达到的效果如下所示:
纯css的HTML如下:
<nav id="top-nav">
<div class="nav-btn">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<header id="header">
<div class="layout">
<h1 class="logo"><a href="#"><span>GIRL’s</span> DRESS</h1></a>
<nav class="nav-list">
<a href="#" class="active">首页</a>
<a href="#">品牌理念</a>
<a href="#">女士时尚</a>
<a href="#">时尚资讯</a>
<a href="#">联系我们</a>
</nav>
</div>
</header>
改造之后:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--小屏幕导航按钮和logo-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand"><span>GIRL’s</span> DRESS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="active">首页</a>
</li>
<li>
<a href="#">品牌理念</a>
</li>
<li>
<a href="#">女士时尚</a>
</li>
<li>
<a href="#">时尚资讯</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
</nav>
在改造导航栏之前,先要知道一个概念:booterstrap的collapse插件。
可以通过两种方式来添加collapse插件
- 通过data属性,向元素添加data-toggle=“collapse”以及data-target。要确保要进行折叠的元素上已经加有collapse类,并且data-target属性接受一个css选择器和id选择器。如果想要一开始是展开的,则需要在要折叠的元素上增加一个class为in;
- 通过js来激活collapse方法
改造步骤:
1. 使用nav标签作为导航,增加navbar、navbar-default、navbar-fixed-top类。navbar-fixed-top的作用是将导航栏固定在页面顶部;
2. 创建一个容器,视宽度情况选用class为container还是container-fluid;container是固定宽高,而container-fluid是宽度为窗口的100%;
3. 定义一个div,带有navbar-header类,内含。navbar-brand类,作为网页的logo;
4. 想要做到响应式效果,就得booterstrapcollapse插件。就像上述代码,将导航信息列表包含在带有navbar-collapse、collapse类的div中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse
感悟:
1. booterstrap是基于jquery的响应式布局,目前我觉得比较方便的是它不需要写好几套布局来适应不同的屏幕,所带的一些类比较快捷。
2. 在对booterstrap进行样式覆盖时,可以在Chrome的开发工具下选中要覆盖样式的元素,先在浏览器上暂时性修改其样式。