最后,当然是两个关闭标签:
rush:js;">
其他两个表格的结构也都一样。
9.2 表格头
要美化所有表格的表格头元素,需要做以下几件事:
□ 居中文本;
□ 添加与最终版本接近的中性灰作为背景颜色;
□ 把字体颜色改为白色;
□ 把 h2 转换为大写;
□ 增大价目表的尺寸;
□ 给表格添加必要的内边距。
完成以上美化工作,只要下面几行代码即可。这里我们把所有针对表格的样式都放到 #signup 选择符中:
rush:js;">
#signup {
table {
border: 1px solid @table-border-color;
float: none;
thead th {
text-align: center;
background-color: @gray-light;
color: #fff;
padding-top: 12px;
padding-b
ottom: 32px;
h2 {
text-transform: uppercase;
}
}
}
}
简单来说,这些样式完成了除增大价目表尺寸之外的所有工作。我们可以在这个基础上,开始添加样式,仍然在 #signup 选择符内:
rush:js;">
.price {
font-size: 7em;
line-height: 1;
}
这样就得到了下面的结果:
这就跟我们预期的结果接近了,但我们想减少美元符号的大小。为了能控制到它,必须在标记中给它加个 span 标签:
添加新标签后,可以把相应规则嵌套在 .price 中:
rush:js;">
.price { ...
span {
font-size: .5em;
vertical-align: super;
}
}
以上规则就缩小了美元符号为原来的一半,并且顶部对齐。
接下来居中结果,需要给父 .price 选择符添加一点负外边距:
rush:js;">
.price {
margin-left: -0.25em;
...
下面的屏幕截图就是现在的结果:
9.3 表体和表脚
同样以三个价目表为目标,统一做出如下调整:
□ 给功能列表添加左、右内边距;
□ 把按钮拉伸至全宽;
□ 增大按钮尺寸。
规则代码如下:
rush:js;">
#signup {
table {
...
tbody {
td {
padding-left: 16px;
padding-right: 16px;
}
}
a.btn {
.btn-lg;
display: block;
width: 100%;
background-color: @gray-light;
color: #fff;
}
现在的效果如下:
现在公共样式完成了,接下来就可以考虑差异化了。
9.4 为不同的价目表添加不同的样式
我们先来给不同的价目表的表头和 Sign up Now! 按钮添加预期的颜色。在客户给我们的设计图中,Basic 是蓝色,Premium 是绿色,Pro 是红色。下面我们将选择好的颜色值指定给三级品牌色:
rush:js;">
@brand-primary: #428bca;
@brand-secondary: #5cb85c;
@brand-tertiary: #d9534f;
设置完颜色变量,就可以将它们应用给适当的表头和按钮:
(1) 在这里我们先给 .package-basic 表应用主品牌色 @brand-primary:
rush:js;">
#signup .package-basic table{
thead th {
background-color: @brand-primary;
}
}
...
(2) 然后再把主品牌色应用给表格里的按钮。这里,我们使用 bootstrap/mixins.less 中定义的 .button-variant() 混入给 :hover 和 .active 状态应用样式。这个混入函数接受三个参数:颜色、背景颜色和边框颜色。代码如下:
rush:js;">
#signup .package-basic table{ ...
.btn {
.button-variant(#fff; @brand-primary; darken(@brand-primary,5%));
}
}
编译后,这个简洁的混入函数就会给按钮及其悬停、活动状态生成对应的样式了。
(3) 接着,我们对其它两个表格重复上述过程:
rush:js;">
#signup .package-premium table {
thead th {
background-color: @brand-secondary;
}
.btn {
.button-variant(#fff; @brand-secondary; darken(@brand-secondary,5%));
}
}
#signup .package-pro table {
thead th {
background-color: @brand-tertiary;
}
.btn {
.button-variant(#fff; @brand-tertiary; darken(@brand-tertiary,5%));
}
}
现在表格的效果如下:
9.5 适配小视口
由于 Bootstrap 3 对响应式设计的重视,我们的表格在视口断点时都表现得很好。前面已经看到在中级宽度视口中表格的表现了,下面在看看各种视口的显示效果,发现显示很好,但是在大约 480~992px 之间的时候,表格会扩展到与屏幕一样宽。很明显,这个时候就太宽了,如下图所示:
因为只有三个表格,所以不可能考虑两栏布局的方案。只能限制表格宽度,并使用自动的左、右外边距使它们居中。我们使用 max-width 为 @screen-sm-max 的媒体查询,把表格的最大宽度设置为400px,再使用 .center-block() 让表格居中:
rush:js;">
@media (max-width: @screen-sm-max) {
#signup .package {
max-width: 400px;
.center-block();
}
}
这样就可以宽度受限的表格在窗口居中了,如下:
此时,三个表格有了差异,而且具备了响应性。可是,我们希望在中、大视口,我们希望 Premium 方案能够突出。
9.6 突出重要的表格
我们要在针对中大视口的媒体查询中添加样式:
rush:js;">
// Visually enhance the premium plan
@media(min-width: @screen-md-min){
}
在这个媒体查询中,我们首先减少 Basic 和 Pro 表的宽度,再给它们添加一些上外边距,将它们向下推一下:
rush:js;">
//Size down the basic and pro
#signup .package-basic table,#signup .package-pro table {
width: 90%;
margin-top: 36px;
}
接下来增大 Premium表的字号,并为其按钮添加内边距:
rush:js;">
//Size up the premium
#signup .package-premium table {
thead th {
font-size: 1.5em;
h2 {
font-size: 1.5em;
}
}
a.btn {
font-size: 2em;
padding-top: 24px;
padding-b
ottom: 24px;
}
}
这样得到的结果跟预期目标已经接近了,如下图所示:
下一个目标就是让三个表格靠近一些。为此,就要对外边距进行一些调整,在用一用 z-index 属性:
rush:js;">
//Squeeze tables together
#signup .package-basic {
margin-top: -58px;
margin-left: 58px;
z-index: 1;
}
#signup .package-premium {
z-index: 1000;
}
#signup .package-pro {
margin-right: -30px;
z-index: 1;
}
解释下上面的规则:
□ 使用负的右外边距把(左侧的)BASIC PLAN 表向右推,同时用等量的左外边距抵消它,以保持三个表格的相对位置不变;
□ 使用负的左外边距把(右侧的)PRO PLAN 表向左推。
□ 调整所有表格的 z-index 值,让左、右两个表位于中间的表地下。
PS:关于 z-index,可以参考这篇文章:
下面的屏幕截图显示了在中等宽度视口中的效果:
接下来只需要再对 Basic 表在下一个更大的断点作一调整。在上一个媒体查询后面写一个新的媒体查询:
我们可以看到在1200px 及更大的视口中的效果如下:
现在,我们需要从整体上做一些修饰和调整的工作。
10.最后的调整
本节,我们将从增强页面整体性的角度出发,再做一些细节的调整。首先,给页面中的每个部分的 h1 标题增加上必要的上、下内边距,并增大字号。然后,再增强一下导航的体验,即给导航条添加 ScrollSpy 并使用 jQuery 将点击导航后的滚动过程变成动画。
10.1 调整标题
先来增强各部分的主标题。现在看一下这些标题,你会发现它们很不起眼。比如,就以 Features 部分为例吧:
我们的增强方案是降低其对比度,增大其内边距。我们只想把规则应用给 FEATURE、IMPACT 和 SIGN UP,因此可以通过 ID 选择它们。
(1) 在编辑器打开 _page-content.less 。
(2) 在文件顶部,在给页面主体应用上内边距的规则之后,添加以下代码:
(3) 以上规则做的事情如下:
□ 给这些部分添上上、下内边距;
□ 显著增大 h1 标题的字号;
□ 减少标题的对比度;
□ 通过设置行高和下内边距,保证标题周围的空间合适。
现在的效果如下,看看有什么不一样:
这些变化会体现在所有视口大小的页面中。对于小视口,目前的 h1 太大了。另外,我们还需要添加一些左、右外边距。因此还要继续调整一下。我们不想让后面的样式影响大视口的布局,所以得把它们封装到一个媒体查询中:
下面的屏幕截图展示了调整后的效果:
接下来我们改进导航的体验。
10.2.为导航条添加 ScrollSpy
我们要配置顶部的导航条,令其对应页面中的位置。下面给导航条添加 Bootstrap 的 :
(1) 打开 html 文档,给 body 标签添加下面的 ScrollSpy 属性:
rush:js;">
PS:假如页面中包含多个导航条,需要在 data-target 属性中具体指出。或许得为 ScrollSpy 导航条添加一个ID,比如,然后将这个ID作为 data-target属性的值。
(2) 设置了这些属性,保存文件,刷新浏览器,点击导航,会发现导航能够定位到页面对应的位置,如下图所示:
打开 js/main.js 文件, 在$( document ).ready(function() { 中添加以下代码:
rush:js;">
$('.navbar [href^=#]').click(function(e){
e.preventDefault();
var div = $(this).attr('href');
$("html,body").animate({
scrollTop: $(div).position().top
},"slow");
});
这里我们使用 jQuery 做了以下几件事:
□ 选择了 .navbar 元素中以页面位置中的锚为目标的链接;
□ 阻止了默认的单击行为;
□ 将滚动过程变为动画,设置了动画速度为 slow。
单击某个导航项,就可以看到滚动动画了。
11.小结
花点时间前后翻阅一下页面,欣赏一下各部分的细节,调整一下窗口,看看布局的响应性如何。
下面简单回顾下,我们的客户向我们提出了设计一个单页营销站点的要求:
□ 使用 Bootstrap 高清图样式的大字欢迎语,背景图十分抢眼,而且具有响应能力;
□ 使用 Font Awesome 图标的功能列表;
□图片墙网格的用户赞誉,同样完美适配各种视口;
□ 注册区使用 Bootstrap 的表格样式,并自定义了中档价目表,在其中、大视口更加突出;
□ 使用 ScrollSpy 和 jQuery 增强了导航条,并添加了动画滚动效果。
这样,本书就结束了。做完本章和前面几章的项目,相信你一定有了比较大的收获。总结一下吧:
□ 掌握了 Bootstrap 的所有细节;
□ 把 Bootstrap LESS 和 JavaScript 整合进我们的项目文件;
□ 把 Bootstrap 的 glyphicons 替换成了更丰富的 Font Awesome 图标字体;
□ 对 Bootstrap 的样式进行自定义和调整,从而达到对设计结果的精准控制。
此例显示效果地址:
以上所述是小编给大家介绍的Bootstrap 网站实例之单页营销网站。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
相关文章
Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...