TBLEG
扫描微信账号

扫一扫微信二维码

【读书笔记《Bootstrap实战》】4.企业网站

2020-05-15 信息
区块链白皮书代写

上一章有对个人作品站点进行一些优化。本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们能力。换句话说,我们要构建一个相对复杂企业网站主页。

下面有几个成功企业网站:

□ Zappos (http://www.zappos.com/)

□ Amazon (https://www.amazon.com/)

尽管这些网站网站各有特色,但共同一点就是它们都很复杂。

如果按照区域划分,可以将这些网站主页分成三部分。

□ 页头区:这一部分包含Logo、带下拉菜单主导航、二级和实用链接导航,以及登录和注册选项。

□ 主内容区:这一部分布局复杂,至少三栏。

□ 页脚区:包含多栏链接和信息。

我们必须能够掌控这些复杂性。为此,需要充分利用 Bootstrap 12栏响应式系统。

以下是我们打算要构造设计在中、宽视口中效果:

在窄视口中,页面会相应变化,如下图所示:

这样,我们需要做以下这些事。

(1) 以【Bootstrap】2.作品展示站点 个人站点作为起点。

(2) 完成复杂页头区,包括 Logo、导航以及右上角实用导航(桌面视口)。

(3) 在较窄视口中,实用导航只显示为图标,与折叠后响应式导航条并列。

(4) 要实现企业风格配色方案。

(5) 调整桌面版和响应式导航条。

(6) 为主内容区和页脚区设置复杂多栏布局。

先做最核心工作 —— 准备项目启动文件。

 

1. 准备启动文件

我们直接把 前面例子 作为启动文件,然后在其之上进行修改就行了。(当然也可以直接提供 本书源码 ,然后解压缩找到文件夹 04_Code_BEGIN )

 

2.页头区

下面我们就从上到下,先来实现复杂页头区,在前一个项目基础上包括以下特性:

□ 在桌面浏览器及较大视口中,让站点 Logo 显示在导航条之上。

□ 包含菜单项导航条,每个菜单项又都包含下拉菜单。

□ 使用导航区。

□ 带用户名和密码字段登录表单。

□ 注册选项。一下是桌面浏览器中目标结果:

窄视口中目标结果如下:

让我们开始吧。

 

2.1 包含下拉菜单导航项

可以看到导航条是由下拉菜单,所以我们先修改下对应导航条。很明显,导航项采用了下拉菜单。我们可以参考下官方文档,先实现下拉菜单。 

官方文档:http://getbootstrap.com/components/#navbar 

中文版文档:http://v3.bootcss.com/components/#nav-dropdowns

(1) 根据文档,我们实现第一个下拉菜单代码如下:

全文阅读
文章关键词
class
布局
bootstrap
variables
扫描关注微信账号

试试长按二维码加关注

  • 咨询
    1004113364