Bootstrap【Bootstrap】4.铺面网站(待续)

直达同样回来起个人站点站点进行局部优化。本章,轮至我们多这个作品站点了,补充部分种,从而显示我们的能力。话句话说,我们设构建一个对立复杂的柜网站主页。

脚有几乎单成功企业之网站:

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

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

尽管这些网站网站各有特色,但一头之某些就是是它们都大复杂。

假如依照区域分,可以用这些网站的主页分成三片段。


页头区:这同一部分含Logo、带产拉菜单的主导航、二级和实用链接导航,以及登录以及挂号选项。

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

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

俺们得能够掌控这些纷繁。为夫,需要充分利用 Bootstrap
的12棚响应式系统。

以下是咱打算只要组织的筹划以遭遇、宽视口中的法力:

Bootstrap 1

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

Bootstrap 2

如此这般,我们需要举行以下这些事。

(1)
以【Bootstrap】2.创作展示站点 的私有站点作为起点。

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

(3) 在比狭窄的视口中,实用导航只展示也图标,与折叠后的响应式导航条并列。

(4) 要落实公司风格的配色方案。

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

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

优先做顶基本之工作 —— 准备项目之启航文件。

 

1.
备选启动文件

咱直接把 前方的事例 作为启动文件,然后以该上述进行修改就实行了。(当然也得以一直提供的 本书源码 ,然后去掉压缩找到文件夹 04_Code_BEGIN

 

2.页头区

下我们便从上到下,先来贯彻复杂的页头区,在前一个种的根底及囊括以下特点:

□ 于桌面浏览器与于生视口中,让站点 Logo 显示在导航条以上。

□ 包含菜单项的领航久,每个菜单项又都富含下拉菜单。

□ 使用导航区。

□ 带用户称及密码字段的记名表单。

□ 注册选项。一下凡是桌面浏览器中之对象结果:

Bootstrap 3

窄视口中的靶子结果如下:

Bootstrap 4

于我们开始吧。

 

2.1 包含下拉菜单的领航项

可看看导航漫长凡由下拉菜单的,所以我们事先改下相应的导航条。很明确,导航项用了下拉菜单。我们得以参考下官方文档,先实现下拉菜单。 

法定文档:http://getbootstrap.com/components/#navbar 

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

(1) 根据文档,我们落实率先单下拉菜单的代码如下:

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes 
</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>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
  <li class="divider"></li>
  <li><a href="#">One more separated link</a></li>
</ul>
</li>

好看来成效如下:

Bootstrap 5

(2) 补全外下拉菜单代码。

(3) 我们修改导航项。把bootstrap/navbar.less 的情节复制到_navbar.less
中,覆盖原内容。然后找到注释 // Brand/project
name,修改 .navbar-brand的内边距如下:

// Brand/project name
.navbar-brand { ...
  padding: 10px 30px 0 15px;
  ...

(4) 打开 less/_variables.less 文件,修改变量如下:

@navbar-height: 50px;

(5) 保存,编译。这样咱们的下拉菜单初步完成。显示力量如下:

Bootstrap 6

 

2.2 把 Logo 放到导航久上

于这设计方案里,Logo 可能出现在片单地方,视情要迟早:

□ 在桌面以及富屏幕中,显示在导航条上;

□ 以机械和手机屏幕中,显示在响应式导航条中。

动 Bootstrap 的响应式使用类似,这半碰我们都得以做到。方法如下;

(1) 打开html文档,找到导航长,复制 navbar-brand 的链接和图:

<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>

(2) 然后贴贴到导航条上方,在 <header role=”banner”>标签以及 <nav
role=”navigation” class=”navbar navbar-default”>标签内。

(3) 把此 Logo 用 <div class=”container”>…</div>
包装起来,使该叫拘于 Bootstrap 居中的网格内。

(4) 编辑 Logo 链接,将那个类名由 navbar-brand 改呢 banner-brand
。然后拿图纸宽度改吧180

<div class="container">
  <a class="banner-brand" href="index.html">
    <img src="img/logo.png" alt="Bootstrap'" width="180" />
  </a>
</div>

(5) 保存修改,刷新显示,就可以于导航条者看到新的Logo了:

Bootstrap 7

脚我们得调整 Logo,让它才在必要常常显得。

在 _variables.less 中,找到变量 @grid-float-breakpoint ,并修改也:

@grid-float-breakpoint: @screen-md-min;

本条变量支配了领航长在狭小视口中折叠,在宽视口中展开。在我们的实际被,考虑到导航的错综复杂,需要以看似的生一个较富足的断点折叠导航条。因此,需要把变量的价值设置为 @screen-md-min。

装了这变量后,我们而考虑被 banner-brand 只于备受、大型视口中显得,而受
navbar-brand 只当小与超小型视口中显。Bootstrap
也这提供了平组响应式实用类,具体可参见在线文档:http://getbootstrap.com/css/#responsive-utilities (中文文档: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:

Bootstrap 8

以小型和超小型视口中,只见面显示 navbar-brand 中之 Logo:

Bootstrap 9

 

2.3 调整导航长条

今天导航条包含7桩,每起又各有子菜单,体现了一个大型复杂网站的需要。

连下去,我们设拿 All Departments
菜单挪到导航长长的的绝右端,让她同其他菜单保持最好充分距离。

Bootstrap 10

操作步骤是:我们事先将 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>

保修改并刷新页面,就可以看到效果了:

Bootstrap 11

 

2.4 添加运用导航

俺们的计划性要提供几乎个实用的导航链接,让用户可以登录、注册及查阅购物车。

 在负大型的视口中,我们拿它们坐页头区的右侧上比赛,如下图所示:

Bootstrap 12

于较小之屏幕中,则把相应的链接图标显示在折叠后底导航久之最好右端,如下图所示:

Bootstrap 13

 

说开就是举行。打开 html 文档,在页头区添加实用导航项的符号,放在
banner-brand 元素后面。以下是完全的标记,开头是 header 标签:

    <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>
        </div>

方的 fa-user 和 fa-shopping-cart 类添加了 Font Awesome
的用户和购物车的图标,并通过 fa-lg 类把它的尺码增大了33%。关于增大
Font Awesome
图标的详实说明,可以参见其的文档:http://fontawesome.io/examples/#larger

 保存修改并刷新页面后,就可以看到新长的 utility-nav 出现在
banner-brand Logo下方了:

Bootstrap 14

接通下,我们需要针对布局进行相对位置的调。

(1) 新建文件 less/_banner.less ,并在 __main.less 导入该公文。

(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 元素出现于页头区底右手上斗位置。

 Bootstrap 15

 

 

待续…

相关文章