文章目录
一、准备启动文件
1.完成之前的效果：
2.完成之后的效果
-
宽屏：
-
窄屏：
3.文件清单
- Bootstrap LESS和 JavaScript文件，分别位于下列文件夹：
- less/bootstrap：Bootstrap的 LESS文件
- js/bootstrap：Bootstrap的个别插件
- js/plugins.js：Bootstrap压缩后的插件
- HTML5 Boilerplate及下列文件：
- 基本的结构化标记文件 index.html
- js/vendor/modernizr-2.6.2.min.js
- js/vendor/query-1.10.2.min.js
- 保证兼容 Internet Explorer 8的 repond.js：
- js/vendor/respond.js
- Font Awesome 字体图标，包括：
- fonts文件夹中的图标字体
- less/font-awesome文件夹中的 LESS文件
- 其他自定义LESS文件，在less文件夹：
- __main.less：基于 bootstrap.less,，导入了位于 less/bootstrap 中的 Bootstrap 的 LESS 文件、Font Awesome字体图标和自定义的 LESS文件。
- _carousel.less：基于 Bootstrap的 carousel.less，自定义了传送带的内边距、背景和指示图标。
- _footer.less：包含 Logo及社交媒体图标的布局和设计样式。
- _navbar.less：基于 Bootstrap的 navbar.less，调整了 .navbar-brand 类的样式，以使导航条中的 Logo位置合适。
- _page-contents.less：其中的样式确保了每一栏中的浮动按钮在呈现为单栏的情况下相互清除。
- _variables.less：基于 Bootstrap和 variables.less，针对导航条和传送带自定义了灰颜色、新增了变量。
4.本章目标
(1) 以 源码所提供的 的个人站点作为起点。
(2) 完成复杂的页头区，包括 Logo、导航以及右上角的实用导航（桌面视口）。
(3) 在较窄的视口中，实用导航只显示为图标，与折叠后的响应式导航条并列。
(4) 要实现企业风格的配色方案。
(5) 调整桌面版和响应式导航条。
(6) 为主内容区和页脚区设置复杂的多栏布局。
二、页头区
1.需要完成的效果特性：
- 在桌面浏览器及较大视口中，让站点 Logo 显示在导航条之上。
- 包含菜单项的导航条，每个菜单项又都包含下拉菜单。
- 使用导航区。
- 带用户名和密码字段的登录表单。
- 注册选项。
- 以下是桌面浏览器中的目标结果：
- 窄视口中的目标结果如下：
2.将Logo放在导航条上方
- 要实现两种效果：
- 在桌面和宽屏幕中，显示在导航条上方；
- 在平板和手机屏幕中，显示在响应式导航条内部。
- 打开：index.html
- 找到
.navbar-brand的链接与图片，复制到<header role="banner">标签和<nav role= "navigation" class="navbar navbar-default">标签之间。 - 把这个 Logo 用
<div class="container">...</div>包装起来，使其被限制在Bootstrap居中的网格内部。 - 编辑 Logo的链接，将其类名由 navbar-brand 改为 banner-brand 。然后把图片宽度改为 180。
- 结果代码如下所示：
<header role="banner">
<div class="container">
<a class="banner-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="180"></a>
</div><!-- /.container -->
<nav role="navigation" class="navbar navbar-default">
- 保存查看效果如下：
- 调整 Logo，让它只在必要时显示
- 在 _variables.less 中，找到变量 @grid-float-breakpoint（源码中已改好） ，并修改为：
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-sm-min;
这个变量决定了导航条在窄视口中折叠，在宽视口中展开。在实际中，考虑到导航的复杂性，需要在接近的下一个较宽的断点折叠导航条。因此，需要把变量的值设置为 @screen-md-min。
设置完这个变量后，要考虑让 banner-brand 只在中、大型视口中显示，而让 navbar-brand 只在小和超小型视口中显示。Bootstrap 为此提供了一组响应式实用类，具体可以参考在线文档：http://v3.bootcss.com/css/#responsive-utilities）
(1) 把 visible-md visible-lg 添加到 banner-brand 类后面：
<a class="banner-brand visible-md visible-lg" href="#">
<img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>
(2) 把 visible-xs visible-sm 添加到 navbar-brand 类后面：
<a class="navbar-brand visible-xs visible-sm" href="#">
<img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>
(3) 保存刷新网页,可以看到，在中、大型视口中，只会显示 banner-brand 中的 Logo；在小型和超小型视口中，只会显示 navbar-brand 中的 Logo。
3.调整导航条
- 导航条包含 7项，每项又各有子菜单，体现了一个大型复杂网站的需求
- 查看结果标记，会发现以下特殊的类和属性：
- 父级 li 元素中的 class=“dropdown” ；
- 链接中的 class=“dropdown-toggle” ；
- 链接中的 attribute=“data-toggle” ；
- 子菜单 ul 中的 class=“dropdown-menu” 。
- 以下是结果标记：
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
...
</ul>
</li>
- 另外还有一个带特殊类的特殊标签，用于显示下拉菜单指示图标：
<b class="caret"></b>。（创建这个指示图标的 CSS在 less/bootstrap/dropdowns.less中。） - 确定下拉菜单可以正常使用，接下来，把 All Departments 菜单挪到导航条的最右端，让它与其他菜单保持最大距离。
- 先把 All Departments 菜单移除父元素 ul，并列排在原父元素 ul 后；然后使其包含在新的 ul 标签内，新标签的类名为 “nav navbar-nav pull-right”。
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">All Departments <b class="caret"></b></a>
- 保存刷新，效果如下：
三、添加实用导航
1.要实现的效果
- 在中大型的视口中，把它们放到页头区的右上角，如下图所示：
- 在较小的屏幕中，则把对应的链接图标显示在折叠后的导航条的最右端，如下图所示：
2.添加代码和样式
- 在index.html的页头区添加实用导航项（.utility-nav）的标记，放在 banner-brand 元素后面。
<header role="banner">
<div class="container">
<a class="banner-brand visible-md visible-lg" href="#">
<img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>
<div class="utility-nav">
<ul>
<li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> Log In or Register</a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> View Cart</a></li>
</ul>
</div><!-- /.utility-nav -->
</div><!-- /.container -->
上面的 fa-user 和 fa-shopping-cart 类添加了 Font Awesome 的用户和购物车的图标，并通过 fa-lg 类把它们的尺寸增大了33%。关于增大 Font Awesome 图标的详细说明，可以参考它的文档：http://www.fontawesome.com.cn/examples/#larger
- 保存修改并刷新页面后，就可以看到新添加的 utility-nav 出现在 banner-brand Logo下方了：
- 接下来，对布局进行相对位置的调整。
(1) 新建文件 less/_banner.less ，并在 __main.less 导入该文件。
// Other custom files
@import "_banner.less"; // added
(2) 编辑 _banner.less 文件，先把 .utility-nav 设置为绝对定位到右上角，而且是在 header[role=“banner”] 的上下文中应用样式：
//// Banner Area Styles
//
header[role="banner"]{
.utility-nav {
position: absolute;
top: 0;
right: 0;
}
}
(3) 然后再进行一些细节调整：
- 为.banner-brand 类添加上内边距，以增加页头区的高度。
- 将页头区 container 的定位方式设置为 relative，以使它包含绝对定位的 utility-nav 元素。
- 删除无序列表的项目符号。
- 向左浮动列表项
- 将链接显示为 inline-block 并添加内边距。
- 删除悬停时的下划线。
- 完成上述调整的样式规则如下：
//// Banner Area Styles
//
header[role="banner"]{
.banner-brand {
padding-top:40px;
}
> .container {
position: relative;
}
.utility-nav {
position: absolute;
top: 0;
right: 0;
> ul {
list-style:none;
> li {
float: left;
> a {
display: inline-block;
padding: 8px 12px;
&:hover {
text-decoration: none;
}
}
}
}
}
}
四、调整响应式导航
- 在小屏幕中，导航条折叠后 utility-nav 会出现问题。最明显的问题就是它会消失不见。
- 要让 utilility-nav 显示。必须给它设置一个比导航条更大的 z-index，前者在 _variables.less 中被设置为1000.可以在 _banner.less 中，把 .unlility-nav 的 z-index 设置为 1999.
- 于是，实用导航就会出现了：
- 接下来需要解决它会遮挡 navbar-toggle 按钮的问题。把按钮移到导航条左侧就行了，修改 _navbar.less ，找到注释 // Navbar toggle，修改.navbar-toggle 选择符的值：
.navbar-toggle {
position: relative;
float: left; //edited
margin-left: @navbar-padding-horizontal; //edited
- 保存后编译，就可以看到效果了：
- 很明显，还需要解决过分拥挤的问题，也就是要对除屏幕阅读器之外的设备隐藏链接文本。在折叠后的导航条中，图标本身就足以传递意图了，何况还可以把图标弄得更大一些。
(1) 打开 html 文档，用 span 元素包围 utilility-nav 中每个链接的文本：
<li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> <span>Log In or Register</span></a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> <span>View Cart</span></a></li>
(2) 在 _banner.less 中添加针对这些 span 标签的媒体查询。在使用LESS的情况下，可以精确的嵌套媒体查询。在此要使用 @grid-float-breakpoint 变量，把 max-width 查询设置为 @grid-float-breakpoint -1 ，因为这个变量的值意味着在它那么宽时，导航条就会从折叠变成扩展状态。在这个媒体查询中，使用实用类 sr-only 作为混入，对除屏幕阅读器之外的所有设备隐藏文本。（参考文档：https://v3.bootcss.com/css/#helper-classes-screen-readers）
.utility-nav {
...
> a {
...
@media (max-width:(@grid-float-breakpoint - 1)){
span { .sr-only(); }
}
这样就隐藏了 span 标签中的文本，屏幕上将只剩图标。
(3) 再增大图标尺寸，并在垂直方向上增加一些行高。同样还在这个媒体查询中写样式：
@media (max-width:(@grid-float-breakpoint - 1)){
span {
.sr-only();
}
.icon {
font-size: 2em;
line-height: 1.2;
}
完整如下：
//
// Banner Area Styles
//
header[role="banner"] {
.banner-brand {
padding-top: 40px;
}
> .container {
position: relative; // constrain absolute positioned utility nav
}
.utility-nav {
position: absolute;
top: 0;
right: 20px;
z-index: 1999;
> ul {
list-style: none;
> li {
float: left;
> a {
display: inline-block;
padding: 8px 12px;
&:hover {
text-decoration: none;
}
@media (max-width: (@grid-float-breakpoint - 1)) {
span {
.sr-only();
}
.icon {
font-size: 2em;
line-height: 1.2;
}
}
}
}
}
}
}
保存编译后，可以查看到显示效果如下：
五、调整配色
- 网站的配色是标准的企业网站颜色：蓝、红、灰。下面把这些颜色放到变量里。
(1) 打开 _variables.less ，修改 @brand-primary，并新增红色的 @brand-feature。
@brand-primary: #3e7dbd; //edited blue
@brand-feature: #c60004; //added new red
(2) 然后调整链接的悬停颜色，使其比 @brand-primary 稍浅：
@link-hover-color: lighten(@link-color, 15%); //edited
修改后效果如下：
六、调整折叠后的导航条配色
- 打开 _variables.less ，搜索 // Navbar，在这里看到导航条用到的变量。 这里指定的大多数标准值既对折叠后的响应式导航条有效，也对宽屏幕下扩展的导航条有效。
- 修改目标：折叠后响应式导航条的背景、文本和链接颜色和默认值基本一致，但在中大型视口中变成蓝色背景、浅色文本。
1.调整响应式导航条
- 为此要调整一些变量的默认值，然后再创建一些新变量，只应用给扩展后的导航条。
(1) 找到 注释// Basics of a navbar，修改代码如下：
@navbar-height: 44px;
...
@navbar-default-color: @text-color;
@navbar-default-bg: #fff;
(2) 向下找到导航条链接区，调整颜色让链接颜色与导航条文本颜色一致，并给活动链接添加一点背景色：
// Navbar links
@navbar-default-link-color: @navbar-default-color;
@navbar-default-link-hover-color: @navbar-default-color;
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 5%);
@navbar-default-link-active-color: @navbar-default-color;
@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
(3) 再调整 navbar-toggle 的样式，删除边框和背景，调深导航条：
// Navbar toggle
@navbar-default-toggle-hover-bg: transparent;
@navbar-default-toggle-icon-bar-bg: @gray;
@navbar-default-toggle-border-color: transparent;
在窄视口显示效果如下：
- 接下来，需要把右侧的 All Departments链接到左侧（折叠状态下）。Bootstrap 专门有一个类就是为了这个目的。
打开 html 文档，找到包含 All Departments 的标记，把 类 pull-right 改为 navbar-right 就可以了。
- 接下来调整导航条中下拉菜单的行为。从 Bootstrap3.0.2起，下拉菜单项被配置为与折叠后的导航条同宽，但前提是导航条是在最初的 @screen-sm-min 值为
@grid-float-breakpoint的情况下发生折叠。下拉菜单就不是全宽了。实际上，只要调整一个媒体查询，就可以解决这个问题。
(1) 打开_navbar.less搜索 .open .dropdown-menu ，会发现这条规则被嵌套在一个媒体查询中：
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
(2) 要调整这个媒体查询，让它的 max-width 值等于 @grid-float-breakpoint 。实际上，就简单地把这个变量放到那儿就行：
@media (max-width: @grid-float-breakpoint) {
- 保存修改，编译文件，然后刷新页面。这次就会看到下拉菜单与屏幕一样宽了
2.调整水平导航条
- 在大中型屏幕中，导航条水平排列在 Logo 下面。希望此时的导航条呈现 @brand-primary 变量中设置的蓝色背景。为此，必须要翻转链接和文本的颜色，即由浅变深。
- 要使用 Bootstrap 的 inverted-navbar 变量和样式。
(1) 打开 _variables.less，找到注释 Inverted navbar，会发现一些与默认导航条所用类似的变量。就通过它们来给扩展后的导航条应用颜色。
(2) 按照如下所示调整变量：
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @gray-lightest;
@navbar-inverse-bg: @brand-primary;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @navbar-inverse-color;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg,5%);
- 调整好这些变量后，只要把它们应用给扩展导航即可。谓词得写几行自定义的LESS代码。考虑到这种颜色切换属于页头区配色的变化，所以把代码写到 _banner.less 中。
(3) 打开 _banner.less 并添加一个新的带注释的区块：
//Apply .navbar-inverse styles to the enpanded navbar
@media (min-width: @grid-float-breakpoint){
.navbar-default {
.navbar-inverse();
}
}
-
这个媒体查询使用 @grid-float-breakpoint 变量确定了应用新规则的最小视口宽度。因为已经在导航条中添加了 navbar-default 类，所以可以直接使用这个类作为选择符。混入 .navbar-inverse() 则把在 _navbar.less 中定义的样式 .navbar-inverse 应用给了这个媒体查询中的导航条。
-
保存编译后，可以看到在中大型屏幕中，可以看到导航条的蓝色背景和浅色文本：
- 可以看到显示效果中导航条两端的圆角，需要把这些样式去掉。为此，打开 _variables.less，修改变量 @navbar-border-radius：
@navbar-border-radius: 0;
-
最后，把文本转换为大写形式，稍微缩小一点，再加粗。
-
在 _banner.less 中，把如下代码添加到 .navbar-inverse() 混入后：
@media (min-width: @grid-float-breakpoint){
.navbar-default {
.navbar-inverse();
.navbar-nav > li > a {
text-transform:uppercase;
font-size:82%;
font-weight: bold;
}
}
}
- 其显示效果如下：
bug:在xs视口如展开菜单未收拢，则切换到宽视口再次展开会出问题。
七、设计复杂的响应式布局
- 假设在刚刚结束的客户会面中做出了承诺，要把主页内容分成三层，按照重要程度排序。
- 在中大型视口中，所有内容将分布在三栏中。
- 在较窄的视口中，这些栏将从上到下排成一栏。
- 而在平板电脑的视口中，并排的只有两栏，第三栏水平放到它们下面。
- 作为起点，修改原来的主页内容，把其分为三栏，并适量添加内容，修改后代码如下：
<div role="main">
<div class="container page-contents">
<div class="row">
<div class="col-sm-4 clearfix">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/okwu-sm.jpg" alt="OKWU.edu Homepage">
</div>
<div class="item">
<img src="img/okwu-athletics-sm.jpg" alt="OKWU Athletics Homepage">
</div>
<div class="item">
<img src="img/bartlesvillecf-sm.jpg" alt="Bartlesville Community Foundation">
</div>
<div class="item">
<img src="img/emancipation-sm.jpg" alt="Emancipation Stories">
</div>
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon fa fa-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon fa fa-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /#homepage-feature.carousel -->
<h2>Featured Content</h2>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget.</p>
<p><a class="btn btn-primary pull-right" href="#">Learn more <span class="icon fa fa-arrow-circle-right"></span></a></p>
</div>
<div class="col-sm-4 clearfix">
<h3>Welcome!</h3>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
<h3>Recent Updates</h3>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
<h3>And another thing</h3>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
</div>
<div class="col-sm-4 clearfix">
<h4>Don't Miss!</h4>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
<h4>Check it out</h4>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
<h4>Finally</h4>
<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
<p><a class="btn btn-primary pull-right" href="#">Read more <span class="icon fa fa-arrow-circle-right"></span></a></p>
</div>
</div>
</div>
</div>
- 修改后，中宽屏显示效果：
- 窄屏显示效果如下：
1.调整中、宽布局
- 当前，在中款时口中，三栏是等宽的，而且字体大小、按钮大小，还有颜色都一样。结果就是没有层次感。
- 要实现内容从视觉上的分层，可以调整栏宽、字体大小，还有颜色。先从调整栏宽开始。
(1) 打开 html文件，可以看到分栏都是的类 col-sm-4。这表示当前栏是父元素宽度的三分之一，从小视口（764px）及以上宽度开始。
- 想在中大视口（992px及以上）内保留三栏，而且希望第一栏比另两栏宽。
(2) 把第一栏的 栏宽类设为 col-md-5，其他两栏分别为 col-md-4 和 col-md-3.
(3) 保存，刷新，可以看到以宽度分层的三栏：
- 很明显，中间和第三栏的按钮并没有清除。下一步就来调整这些按钮，还有字体大小。
2.调整标题、字体大小和按钮
- 先来调整标题，以便它们清除自己上方的按钮，目前这些按钮都浮动了右侧。为此，要用到之前新建的用于管理页面内容细节的 _page-content.less。
(1) 在_page-contents.less中，写一个选择符选择嵌套在 Bootstrap的分栏类中的 h1 到 h4 。这里可以使用 CSS2的属性选择符，同时只针对嵌套在类以 col- 开头的元素内的这些标题：
main {
...
[class*="col-"] {
h1, h2, h3, h4 {
clear: both;
padding-top: 20px;
}
}
}
- 这样，就可以选中所有可能用到的标题标签，以便清除它们的浮动，再给它们添加一些内边距。
- 这样标题之间有了必要的分隔，也让按钮浮动到了相应位置。但这样也在第二和第三栏上方增加了不必要的上内边距。
(2) 下面来删除每栏最顶部标题的上内边距和上外边距。为此，要使用 :first-child 选择符，嵌套在标题选择符内。这里使用的 &组合符，用于选择这些标题的第一个实例：
h1, h2, h3, h4 {
...
&:first-child {
margin-top: 0;
padding-top: 0;
}
}
(3) 结果就是去掉了后两栏顶部多余的内外边距。
(4) 不过，只想在小或较大视口中删除上内、外边距，这时候主页呈现为多栏。显然，应该把上面的样式嵌套在与相应断点对应的媒体查询中。这个断点就是从单栏布局切换到多栏布局的断点。换句话说，需要把上面的样式嵌套在小及更大的视口中：
@media (min-width: @screen-sm-min) {
&:first-child {
margin-top: 0;
padding-top: 0;
}
}
- 通过把新样式嵌套在上面的媒体查询中，可以保留单栏布局下元素间适当的间距：
- 完成了上述调整，接下来可以调整按钮和字体大小，从而反映内容层次了。下面就来增大主内容区字体和按钮大小，还有修改颜色。
3.增大主栏
- 首先来增大主栏内容的字体大小。
(1) 在_variables.less中，搜索 @font-size-large 变量，将其值修改为：
ceil(@font-size-base * 1.15);
(2) 在 _page-contents.less中，添加如下代码，以利用上一步中设定的字体大小：
.content-primary {
font-size: @font-size-large;
}
- 保存修改，编译文件，刷新浏览器。应该看到主栏文本的字体增大了！
- 接下来调整按钮的颜色，这要用到红色的 @brand-feature 变量，这个变量是在_variables.less中设定的：
@brand-feature: #c60004;
- 还需要利用 Bootstrap在 mixins.less中提供的方便的混入。希望大家抽点时间看看这个文件。打开 bootstrap/mixins.less，搜索 // Button ，可以看到以下面代码开头的混入：
.button-variant(@color; @background; @border) {
- 这个混入的作用如下。
- 指定按钮字体、背景和边框颜色（分别对应于混入接受的三个参数）。
- 生成悬停、焦点和禁用状态的按钮，调整字体颜色、背景颜色和边框。
- 如果有兴趣，还可以看一看 Bootstrap在 bootstrap/buttons.less中如何使用这个混入，就在注释 // Alternate buttons 的下面。以下是为默认主按钮生成的样式：
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
- 以 @btn-default- 和 @btn-primary- 开头的变量是在 variables.less 中
定义的。按照同样的模式，只需简单四步即可生成自己的自定义功能按钮。
(1) 首先，准备一组新的按钮变量。在 _variables.less 中， // Buttons 下面，复制三个 @btn-primary- 变量，将 -primary- 改为 -feature- ，并使用 @brand-feature作为背景颜色：
@btn-feature-color: #fff;
@btn-feature-bg: @brand-feature;
@btn-feature-border: darken(@btn-feature-bg, 5%);
(2) 然后，创建一个文件来保存自定义按钮的样式。新建_buttons-custom.less 并根据bootstrap/buttons.less中的混入写一个下面这样的混入调用：
.btn-feature {
.button-variant(@btn-feature-color; @btn-feature-bg; @btn-feature-border);
}
(3) 保存文件，并将其添加到__main.less中的导入列表：
@import "bootstrap/buttons.less";
@import "_buttons-custom.less"; // added
(4) 在 index.html 中，将类名 btn-primary 改为 btn-feature 。完事之后，还要把按钮变大一些，因此再添加类 btn-lg ：
<a class="btn btn-feature btn-lg pull-right" href="#">
Learn more
- 保存并刷新浏览器，应该看到如下结果。左侧主栏的字体大小和按钮都变大了，而且使用了 brand-feature 颜色。
4.调整第三栏
- 对第三栏要做的很简单，就是缩小字体大小，同时让按钮不那么突出。
(1) 首先调整字体大小。在_variables.less中，调整 @font-size-small 变量：
@font-size-small: ceil(@font-size-base * 0.90);
(2) 接下来把下面这行添加到_page-contents.less中：
.content-tertiary {
font-size: @font-size-small;
}
(3) 保存，编译，刷新，字号变小了。
(4) 接下在，要编辑 index.html 中的按钮类，把 btn-primary 改为 btn-default ，并使用 btn-xs 减小其尺寸：
<a class="btn btn-default btn-xs pull-right" href="#">Read more ...
这样就减小了按钮并把背景变成了白色。
(5) 再把按钮的背景颜色改为浅灰色，同时调整字体颜色和边框。在_variables.less中，像下面这样调整三个 @btn-default- 变量的值：
@btn-default-color: @gray;
@btn-default-bg: @gray-lightest;
@btn-default-border: darken
(@btn-default-bg, 5%);
- 保存修改，编译文件，刷新浏览器。现在页面的层次已经很清晰了，从左到右依次是主内容、次内容和第三栏。这样，现在页面的层次已经很清晰了，从左到右一次是主内容、此内容和第三栏。
- 再看看设计在小屏幕单栏布局时的样子：
在窄视口中，三栏布局变成了垂直排列的一栏，主内容在上，然后是次内容和第三栏。那么剩下所要做的，就是对设计精雕细琢，以便让它在不同设备和视口中体验更佳。
5.针对多个视口进行微调
- 无论在什么视口中，通常都应该在页面中提供一些留白。另外，每个区块的边框最好也有所标示。
(1) 首先，在内容上下各添加一些内边距。给 main 元素添加一些上内边距，这个内边距适用于所有视口，所以不必使用媒体查询：
main {
padding-top: 20px;
padding-bottom: 40px;
}
(2) 然后，设置分栏在单栏布局时清除上方的浮动元素。如果不设置，第二和第三栏可能会覆盖紧上方的按钮。这些样式要写在媒体查询中，以便限制它只应用到窄视口：
//Make columns clear floats in narrow viewport single-column layout
@media (max-width: @screen-sm-min) {
[class*="col-"] {
clear: both;
}
}
就这样了，主内容区收工。最后是复杂的页脚。
八、复杂的页脚
- 接下来要实现一个复杂的多用途的页脚，页脚包括：指向网站三个重要栏目的三组链接、About Us文本、社交媒体图标，还有 Logo。
1.准备标记
- 先从准备标记着手。页脚的目的是对用户尽可能有用，其标记可以按如下步骤来准备。
(1) 用编辑器打开项目文件夹 04_Code_BEGIN 中的 footer-content.html，复制其中的全部内容。
<h3>Categories</h3>
<ul>
<li><a href="#">Shoes</a></li>
<li><a href="#">Clothing</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Kids</a></li>
<li><a href="#">Pets</a></li>
</ul>
<h3>Styles</h3>
<ul>
<li><a href="#">Athletic</a> </li>
<li><a href="#">Casual</a></li>
<li><a href="#">Dress</a></li>
<li><a href="#">Everyday</a></li>
<li><a href="#">Other Days</a></li>
<li><a href="#">Alternative</a></li>
<li><a href="#">Otherwise</a></li>
</ul>
<h3>Other</h3>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Link again</a></li>
<li><a href="#">Try this</a></li>
<li><a href="#">Don't you dare</a></li>
<li><a href="#">Oh go ahead</a></li>
</ul>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p>
<a class="btn btn-default btn-xs pull-right" href="#">Learn more <span class="fa fa-circle-arrow-right"></span></a>
(2) 再回到 index.html，找到粘贴它的位置。这个位置就在 footer role="contentinfo"中，位于 div class=“container” 后面， ul class=“social” 前面。（已经在页脚的位置放了注释。）
(3) 粘贴内容之前，再准备一下利用 Bootstrap 的网格系统。为此，像下面这样把页脚区包含在 div class=“row” 中：
<footer role="contentinfo">
<div class="container">
<div class="row">
<!-- INSERT ADDITIONAL FOOTER CONTENT HERE -->
</div><!-- /.row -->
<ul class="social">
(4) 下面把内容粘贴到位。
(5) 接下来把三组链接及各自的标题包含在类为 col-md-2 的 div 中。这样就保证在中大视口中每一组链接的宽度是父元素总宽度的六分之一。加在一块，三组链接占视口宽度的一半。
<div class="col-md-2">
<h3>Categories</h3>
(6) 继续把这一行内容做完，把 About Us标题及其段落包含在一个类为 col-md-6 的 div中，这样它就占据了剩下的一半宽度。
<div class="about col-md-6">
<h3>About Us</h3>
(7) 保存，刷新，检查结果。
在 980px及更大的视口中，页脚中的栏如下所示：
- 这是中大型视口中的布局。在超小的屏幕中，呈现出的则是单栏布局。但对于 768px 到980px之间的平板电脑，布局还是需要调整一下。开始吧。
2.调整布局适应平板
- 测试一下视口在 768px 到 980px 之间时的布局。Bootstrap 把这个区间界定为小断点，对应变量 @screen-sm 和 col-sm- 网格类。在这个宽度内，单栏布局会导致不必要的空白，如下图所示：
- 要改进这个布局，可以让三组链接浮动起来。使用 Bootstrap的 col-sm- 类 col-sm-4 ，可以将每一栏设置为三分之一宽，使用 ol-sm-12 将 About Us设置为全宽：
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="about col-sm-12 col-md-6">
- 保存并在小视口中测试一下，应该能看到下图所示的结果：
- 改进很多啊！不过离完成还远着呢。尝试单击上方三栏中的链接，恐怕点击不了。检查元素会发现包含 About Us栏的 div 元素并没有清除上方的浮动栏。虽然 About Us标题及文本会出现在三个浮动栏下方，但那个 div 元素却仍然覆盖在三栏内容上面。
3.针对性地清除
- 在 Bootstrap 标准的布局方案中，应该使用类为 row 的 div 元素清除上方的浮动栏。但在此要使用另一个方案，因为只希望这个内容块在特定的断点范围清除浮动。
- 为此，可以在 LESS文件中写一些自定义的样式。不过，也可以直接在标记中使用 Bootstrap的响应式实用类提供的针对性的 clearfix。因为已经在标记中指定了网格类，那就干脆使用第二个方案。
关于使用的这个方案，可以参考 Bootstrap的文档，地址在： https://v3.bootcss.com/css/#grid-responsive-resets
- 如此一来，就要创建一个类为 clearfix 的 div ，并添加一个 Bootstrap的响应式实用类，使其只在小屏幕中可见。就把这个 div 放到 About Us栏的前面吧：
<div class="clearfix visible-sm"></div>
<div class="about col-sm-12 col-md-6">
- 这个 clearfix 类会强制当前元素清除上方的浮动。而 visible-sm 类则控制这个 div仅在小屏幕，也就是指定的断点范围内可见。在其他断点区间，这个 div 元素就像不存在一样。
- 保存以上修改，刷新浏览器。这次就会看到 About Us 栏清除了它上方的浮动，而链接也可以点击了。大功告成。最后再稍微修整几处。
4.修整细节
- 对于页脚，还想再修整几个地方，包括：
- 修整三组链接的外观；
- 调整内外边距；
- 反转配色方案，与导航条保持一致。
- 要完成以上工作，得写一些自定义的样式。遵照层叠原理，先写一些针对页脚的通用规则，然后再过渡到特殊规则。
(1) 在编辑器中打开_footer.less以添加针对页脚的自定义样式。
- 在这个文件里，可以看到第2章中一些样式的修改版本。包括给页脚添加的内边距，以及针对社交媒体图标，还有页脚中 Logo的样式规则。
(2) 现在开始添加针对复杂页脚的样式。
- 首先，缩小页脚字体大小，反转配色与导航条对应——蓝色背景，浅色文本。先设置成这样的颜色，然后再把它们稍微调暗一点。为此，就要使用_variables.less中适当的变量，包括
@font-size-small、@navbar-inverse-bg和@navbar-inverse-color：
footer[role="contentinfo"] {
padding-top: 24px;
padding-bottom: 24px;
font-size: @font-size-small;
background-color: darken(@navbar-inverse-bg, 18%);
color: darken(@navbar-inverse-color, 18%);
这里及后面的规则，都要放到 footer[role=“contentinfo”] 选择
符下。
(3) 接下来调整链接和按钮，以适应新的配色。同样要把规则放在 footer[role=
“contentinfo”] 选择符下：
a {
color: @navbar-inverse-color;
&:focus,
&:hover,
&:active {
color: @navbar-inverse-link-hover-color;
}
}
.btn-default {
color: darken(@navbar-inverse-bg, 18%) !important;
}
(4) 下面是四个 h3 标题，调整它们的字号，去掉下外边距，并把文本转换成大写：
h3 {
font-size: 120%;
margin-bottom: 4px;
text-transform: uppercase;
}
(5) 然后，再去掉链接列表前的项目符号，调整它们的内外边距：
ul {
list-style: none;
padding: 0;
margin: 0;
}
在这个设计中，这里规则针对的是站点页脚中的所有无序列表。如果你自
己网站中包含其他无序列表，可能要考虑添加特定的类，比如 footer-nav 。
(6) 最后，调整社交媒体图标。就是添加一些上内边距，调整一下颜色，以便与新配色方案协调一致。因为图标使用的是 Font Awesome 字体，所以只要调整颜色和背景颜色的值即可：
ul.social {
...
padding: 24px 0 0;
...
> li {
...
> a {
...
background-color: darken(@navbar-inverse-bg, 27%);
color: darken(@navbar-inverse-color, 18%);
...
&:hover {
...
background-color: darken(@navbar-inverse-bg, 32%);
color: @navbar-inverse-link-hover-color;
}
}
}
}
- 就这样了。保存，编译，刷新，好好欣赏吧！以下是页脚在中大型屏幕中的结果：
- 在小屏幕中的效果如下：
- 在超小屏幕中的效果如下：
- 其实挺复杂的，内容多，又适配了超小、小、中、大型视口。
来源：oschina
链接：https://my.oschina.net/u/4275665/blog/3235491