【读书笔记《Bootstrap 实战》】4.商店网站

上一章发出针对个体创作站点进行有优化。本章,轮到我们加这个作品站点了,补充部分色,从而展示我们的力。换句话说,我们设构建一个相对复杂的铺网站主页。

脚来几乎独成功企业之网站:

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

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

尽管这些网站网站各有特色,但并之一些便是其还不行复杂。

假使依区域分,可以用这些网站的主页分成三组成部分。


页头区:这无异有些含有Logo、带产拉菜单的主导航、二级及实用链接导航,以及登录和登记选项。

主内容区:这无异片段布局复杂,至少三栏。

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

咱们得能够掌控这些复杂。为之,需要充分利用 Bootstrap
的12棚响应式系统。

以下是我们打算只要组织之统筹以中、宽视口中的职能:

图片 1

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

图片 2

这样,我们要开以下这些事。

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

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

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

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

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

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

预先开顶核心之行事 —— 准备项目的启航文件。

 

1.
准备启动文件

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

 

2.页头区

下面我们不怕从上到下,先来落实复杂的页头区,在眼前一个类之根基及连以下特征:

□ 在桌面浏览器和比较充分视口中,让站点 Logo 显示在导航条以上。

□ 包含菜单项的领航漫漫,每个菜单项又还包含下拉菜单。

□ 使用导航区。

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

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

图片 3

窄视口中的对象结果如下:

图片 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>

得视成效如下:

图片 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) 保存,编译。这样我们的下拉菜单初步完成。显示效果如下:

图片 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了:

图片 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:

图片 8

在小型及超小型视口中,只见面来得 navbar-brand 中的 Logo:

图片 9

 

2.3 调整导航长条

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

连接下,我们设管 All Departments
菜单挪到导航长条之无比右端,让它和另外菜单保持极老距。

图片 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>

保持修改并刷新页面,就可以看到职能了:

图片 11

 

2.4 添加用导航

我们的计划性得提供几乎独实用的领航链接,让用户可登录、注册及查购物车。

 在受到大型的视口中,我们拿它坐页头区的下手上较量,如下图所示:

图片 12

于比小的屏幕中,则拿相应的链接图标显示在折叠后的领航长达之最好右端,如下图所示:

图片 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下方了:

图片 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 元素出现于页头区之下手上斗位置。

 图片 15

这些调动入中巨型的视口。下面我们本着折叠后底响应式导航条来丰富样式。

 

3.调响应式导航

于有些屏幕中,导航条折叠后 utility-nav
会出现问题。最引人注目的题材即是其见面破灭不见。

图片 16

倘被 utilility-nav 显示。必须被他设置一个比导航条更要命之 z-index,前者以
_variables.less 中吃装置也1000.咱们得当 _banner.less 中,把
.unlility-nav 的 z-index 设置为 1999.

.utility-nav {
  ...
  z-index: 1999;

遂,实用导航虽会见出现了:

图片 17

接下去需要解决其会遮挡 navbar-toggle
按钮的题材。把按钮移到导航条左侧就执行了,修改 _navbar.less ,找到注释 //
Navbar toggle,修改.navbar-toggle 选择适合的值:

.navbar-toggle {
  position: relative;
  float: left;  //edited
  margin-left: @navbar-padding-horizontal; //edited

保存后编译,就可以看到职能了:

图片 18

坏明显,我们尚亟需缓解过分拥挤的题材,也尽管是使对准除屏幕阅读器之外的装备隐藏链接文本。在折叠后底导航长受,图标本身就是足以传递意图了,何况还得管图标将得重怪组成部分。

(1) 打开 html 文档,用 span 元素包围 utilility-nav 中每个链接的公文:

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

(2) 在 _banner.less 中补充加针对这些 span
标签的传媒询问。在使LESS的状态下,可以规范的嵌套媒体询问。在这而动
@grid-float-breakpoint 变量,把 max-width 查询设置为
@grid-float-breakpoint -1
,因为是变量的价值意味着当她那宽时,导航条就会打折叠成扩展状态。在是媒体询问中,使用实用类
sr-only
作为混入,对除屏幕阅读器之外的享有装备隐藏文本。(参考文档:http://getbootstrap.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;
  }

保留编译后,可以查看到展示力量如下:

图片 19

 

4.调整配色

我们盼望网站的配色是正经的信用社网站颜色:蓝、红、灰。下面我们将这些颜色放到变量里。

(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

改后效果如下:

图片 20

 

5.调整折叠后底导航长达配色

 

打开 _variables.less ,搜索//
Navbar,在这里看导航条用到之变量。这里指定的大部标准值既对折叠后底响应式导航条有效,也本着松动屏幕下扩展的领航长达中。

我们期望折叠后响应式导航条的背景、文本及链接颜色与默认值基本一致,但每当丁大型视口中成为蓝色背景、浅色文本。

5.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;

当窄小视口显示效果如下:

图片 21

 

搭下,需要拿右侧的 All Departments链接到左侧(折叠状态下)。Bootstrap
专门有一个类似就是为了这个目的。

开拓 html 文档,找到包含 All Departments 的号,把 类 pull-right 改吗
navbar-right 就好了。

图片 22

 

 

5.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
应用被了此媒体询问中之导航条。

保存编译后,可以看出于饱受大型屏幕被,可以看来导航长达之蓝色背景和浅色文本:

图片 23

 可以看显示效果被导航条两端的圆角,我们要把这些样式去丢。为夫,打开
_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;
    }
  }
}

那形力量如下:

图片 24

 

6.计划复杂的响应式布局

假若我们在刚刚完结之客户会中做出了承诺,要拿主页内容分为三层,按照重点程度排序。

□ 在丁大型视口中,所有情节将遍布在三栏中。

□ 在较狭窄的视口中,这些栏将从上到下排成一圈。

□ 而当平板计算机的视口中,并排除的一味发少棚,第三圈水平放到它们下面。

用作起点,我们修改原来的主页内容,把那分成三栏,并适当添加内容,修改后代码如下:

图片 25图片 26

    <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">

                            Previous
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

                            Next
                        </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 </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 </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 </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 </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 </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 </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 </a></p>
                </div>
            </div>
        </div>
    </div>

main

修改后,中宽屏显示力量:

图片 27

窄屏显示力量如下:

图片 28

 

6.1 调整中、宽布局

当下,在中款时口中,三栏是等方便的,而且字体大小、按钮大小,还有颜色都一律。结果就是没层次感。

倘落实内容由视觉上的道岔,可以调栏宽、字体大小,还有颜色。我们事先从调整栏宽开始。

(1) 打开
html文件,我们得以视咱们的分栏都是的类 col-sm-4。这代表目前牢是父元素宽度的三分之一,从小视口(764px)及以上增幅开始。

咱们怀念以中大视口(992px以及以上)内保留三栏,而且要第一圈比其它两栏宽。

(2) 把第一棚的 栏宽类设为 col-md-5,其他两栏分别吗 col-md-4 和 col-md-3.

(3) 保存,刷新,可以见见因小幅分层的老三圈:

图片 29

那个明白,中间与老三苑的按钮并从未解除。下同样步就是来调整这些按钮,还有字体大小。

 

6.2 调整标题、字体大小和按钮

我们先来调整标题,以便她排自己上的按钮,目前这些按钮都转了右手。为夫,要运之前新建的用于管理页面内容细节之
_page-content.less。

(1) 在 _page-content.less 添加以下代码:

div[role="main"]{
  [class*="col-"]{
    h1,h2,h3,h4 {
      clear: both;  //清除浮动
      padding-top: 20px;
      &:first-child { //首项对齐
        margin-top: 0;
        padding-top:0;
      }
    }
  }
}

(2)
这样就算免去了标题标签的更动,并要三栏的太顶部标题对合,器形力量如下:

图片 30

 

6.3 增大主栏

为突出主栏,我们率先主栏内容的字体大小。

(1) 打开 _variables.less,修改变量 @font-size-large。

@font-size-large: ceil((@font-size-base * 1.15)); // ~16px

(2) 在 _page-contents.less,添加如下代码,以使前一样步设定的字体大小:

.content-primary {
  font-size:@font-size-large;
}

(3) 打开 html文档,在主页第一圈填写上该CSS:

  <div class="col-md-5 content-primary">

联网下去调整按钮的水彩,要用到革命的 @brand-feature 变量。还亟需采取
Bootstrap 在 mixins.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 "_buttons-custom.less";

(4) 在html文档中管第一栏的按钮的 btn-primary 类改呢 btn-feature
类。并让按钮填写上 btn-lg 类,使按钮变死些。

<a class="btn btn-feature btn-lg  pull-right" href="#">

而今咱们得以视由显示力量如下:

图片 31

6.4 调整第三苑

咱俩尚需调整下第三栏,缩小其书,同时吃按钮无那么突出。

(1) 和前面一样,先在 _variables.less, 调整 @font-size-small
变量。只是为着字体大小有异样,但切莫是那么好。

@font-size-small: ceil((@font-size-base * 0.90)); // ~12px

(2) 然后在 _page-content.less 中动用该变量:

.content-tertiary {
  font-size:@font-size-small;
}

(3) 然后叫主页的老三苑应用该类:

 <div class="col-md-3 content-tertiary">

(4) 再接着,把第三栏的装有按钮的 btn-primary 类改也 btn-default,并使
btn-xs 缩小其尺寸:

<a class="btn btn-default btn-xs pull-right" href="#">

(5)
最后,我们编辑下该按钮的颜色,把按钮的背景颜色改变吧浅灰色,同时调动字体颜色及边框:

@btn-default-color:      @gray;
@btn-default-bg:         @gray-lightest;
@btn-default-border:     darken(@btn-default-bg,5%);

如此,现在页面的层次就不行清楚了,从左到右一不成是预示内容、此内容与老三牢。

图片 32

重省我们的筹划在多少屏幕单栏布局时之旗帜:

图片 33

以窄视口中,三栏布局变成了直排列的同等栏,主内容以上,然后是坏内容及老三棚。那么余下所设开的,就是本着设计精雕细琢,以便让它在不同装备与视口中感受更理想。

 

6.5 针对多个视口进行微调

任由在什么视口,通常还应有以页面中提供部分留白。另外,每个区块的边框最好啊具有标示。

(1) 首先,在情节上下各增长一些内边距。给 main
添加一些内边距,这个内边距适用于有视口,所以不用采取媒体询问:

div[role="main"]{ 
  padding-top: 20px;
  padding-bottom: 40px;
  ...

(2)
然后,设置分栏在单栏布局时去掉上方之成形元素。如果未设置,第二栏和老三牢或会见盖紧上的按钮。这些体而推脱载媒体询问中,以便限制它独自以至窄视口:

  //Make columns clear floats in narrow viewport single-colomn layout
  @media (max-width: @screen-sm-min){
     [class*="col-"]{
       clear: both;
     }
  }

如此,主内容区收工了。

 

7.复杂的页脚

连片下去我们设贯彻一个犬牙交错的多用的页脚,页脚包括:指向网站三独重要栏目的老三组链接、About
Us 文本、社交媒体图标,还有 Logo。

 

7.1 准备标记

我们事先打准备标记着手。页脚的目的是对准用户尽可能有因此,我们修改页脚代码如下:

图片 34图片 35

    <footer role="contentinfo">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <h3>Categories</h3>
                    <ul>
                        <li><a href="javascript:;">Shoes</a></li>
                        <li><a href="javascript:;">Clothing</a></li>
                        <li><a href="javascript:;">Accessories</a></li>
                        <li><a href="javascript:;">Men</a></li>
                        <li><a href="javascript:;">Women</a></li>
                        <li><a href="javascript:;">Kids</a></li>
                        <li><a href="javascript:;">Pets</a></li>
                    </ul>

                </div>
                <div class="col-md-2">
                    <h3>Styles</h3>
                    <ul>
                        <li><a href="javascript:;">Athletic</a>  </li>
                        <li><a href="javascript:;">Casual</a></li>
                        <li><a href="javascript:;">Dress</a></li>
                        <li><a href="javascript:;">Everyday</a></li>
                        <li><a href="javascript:;">Other Days</a></li>
                        <li><a href="javascript:;">Alternative</a></li>
                        <li><a href="javascript:;">Otherwise</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <h3>Other</h3>
                    <ul>
                        <li><a href="javascript:;">Link</a></li>
                        <li><a href="javascript:;">Another link</a></li>
                        <li><a href="javascript:;">Link again</a></li>
                        <li><a href="javascript:;">Try this</a></li>
                        <li><a href="javascript:;">Don't you dare</a></li>
                        <li><a href="javascript:;">Oh go ahead</a></li>
                    </ul>
                </div>
                <div class="about col-md-6">
                    <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="javascript:;">Learn more </a>
                </div>
            </div>

            <ul class="social">
                <li><a href="#" title="Twitter Profile"></a></li>
                <li><a href="#" title="Facebook Page"></a></li>
                <li><a href="#" title="LinkedIn Profile"></a></li>
                <li><a href="#" title="Google+ Profile"></a></li>
                <li><a href="#" title="GitHub Profile"></a></li>
            </ul>

            <p class="footer-brand"><a href="bootstrap-code-04.html">
                <img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p>
        </div>
    </footer>

footer

修改下 _footer.less 中之前的体裁文件如下:

footer[role="contentinfo"] { ...
  //text-align: center;
}

当今当980px同重新不行之视口中,页脚中的圈如下所示:

图片 36

7.2 调整布局适应平板

视口在768px到980px间常常之布局,Bootstrap
把此区间界定也多少断点,对许变量 @screen-sm 和
col-sm-网格类。在斯幅度内,单栏布局会造成不必要之空域,如下图所示:

图片 37

而精益求精是布局,可以吃三组链接浮动起来。使用 Bootstrap 的类
col-sm-4,可以用同样栏设置为三分之一富,使用 col-sm-12 将About
Us设置也全宽:

<div class="col-md-2 col-sm-4">
...
<div class="col-md-2 col-sm-4">
...
<div class="col-md-2 col-sm-4">
...
<div class="about col-md-6 col-sm-12">

封存并于有点视口中测试,可以看到结果如下:

图片 38

 

7.3 修整细节

对于页脚,我们尚惦记修复几独地方:

□ 修整三组链接的外观;

□ 调整前后边距;

□ 反转配色方案,与导航长达保持一致。

倘成功上述工作,得写一些机动为之体制。我们准找层叠原理,先勾勒一些对准页脚的通用规则,然后于对接至突出规则。

(1) 在编辑器中开拓 _footer.less 以补充加针对页脚的自定义样式。

(2)
现在开班添加针对繁复页脚的体制。首先,缩小页脚字体大小,反转颜色与导航长达对应——蓝色背景,浅色文本。我们事先安装成这样的颜料,然后又将她有些调暗一点。

footer[role="contentinfo"] {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size:@font-size-small;
  background-color:darken(@navbar-inverse-bg,18%);
  color: darken(@navbar-inverse-color,18%);
}

(3)
接下来调整链接和按钮,以适应新的配色。同样如果拿规则放在 footer[role=”contentinfo”]
选择符下:

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标题,调整其的字号,去丢外边距,并将文件转换成为那个写:

footer[role="contentinfo"] {
  ...
  h3 {
    font-size: 120%;
    margin-bottom:4px;
    text-transform: uppercase;
  }
}

(5) 接着,再夺丢链接列表前的类标志:

footer[role="contentinfo"] {
  ...
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

(6) 再接下来,调整底部的Logo,使该坐落中:

footer[role="contentinfo"] { 
   ...
  .footer-brand {
    margin: 10px;
    text-align: center;
  }
}

(7)
最后,调整社交媒体图标。就是长一些臻外边距,调整一下颜料,以便同新配色方案协调一致。因为图标使用的凡
Font Awesome 字体,所以要是调整颜色及背景颜色的值即可: 

ul.social {
  ...
  padding:20px 0 0;
  ...
  > li {
         ...
         background-color:darken(@navbar-inverse-bg,27%);
    > a {
           ...
           color: darken(@navbar-inverse-color,18%);
    }
    &:hover {
          ...
          background-color:darken(@navbar-inverse-bg,32%);
      color:@navbar-inverse-link-hover-color;
    }
  }
}

封存,编译,刷新。以下是页脚在备受大型屏幕被的结果:

图片 39

接下来是当小屏幕被之效用:

图片 40

末尾是在超小屏幕中之作用:

图片 41

 

8.小结

本次我们还要掌握了有些运用 Bootstrap 的新技巧。简单总结如下:

□ 也复杂性的响应式导航条长样式,使该于饱受大视口中出现在 Logo
下方,而以多少屏幕被而能赔叠起来。


构建了自定义之响应式实用导航条,文本以及图标都能创造性地适应较充分及比较小之屏幕。

□ 为页面的预告内容设计了响应式布局,是三棚内容主次分明。

□ 构建了一个苛的页脚,有效地组织了差不多个链接块,还有跨视口的文件段落。

□ 因导航长长的配色为根基增强了页脚的配色。

 

此例显示力量地址:http://yexiaochao.github.io/show/bootstrap-code-04.html(附《Bootstrap
实战》的PDF文档和源码链接:http://pan.baidu.com/s/1slPDoux)

本例源码下载:bootstrap-code-04.zip

相关文章