Bootstrap【读书笔记《Bootstrap 实战》】4.铺面网站

俺们直接把 前面的事例 作为启动文件,然后在其上述举行修改就行了。(当然也得以一直提供的 本书源码 ,然后解压缩找到文件夹 04_Code_BEGIN

(4) 要促成公司风格的配色方案。

下边有多少个成功集团的网站:

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

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

□ 将链接突显为 inline-block 并添加内边距。

要更上一层楼这么些布局,可以让三组链接浮动起来。使用 Bootstrap 的类
col-sm-4,可以将一栏设置为三分之一宽,使用 col-sm-12 将About
Us设置为全宽:

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

Bootstrap 1

俺们的宏图须要提供多少个实用的导航链接,让用户可以登录、注册和查阅购物车。

在窄视口中,三栏布局变成了垂直排列的一栏,主内容在上,然后是次内容和第三栏。那么余下所要做的,就是对统筹精雕细琢,以便让它在分化装备和视口中感受更佳。

(1) 找到 注释// Basics of a navbar,修改代码如下:

(2) 编辑 _banner.less 文件,先把 .utility-nav
设置为相对定位到右上角,而且是在
header[role=”banner”]的前后文中使用样式:

窄视口中的指标结果如下:

运用 Bootstrap 的响应式使用类,那两点我们都得以成功。方法如下;

□ 为复杂性的响应式导航条添加样式,使其在中大视口中涌出在 Logo
下方,而在小屏幕中又能折叠起来。

接下去大家要贯彻一个错综复杂的多用途的页脚,页脚包涵:指向网站八个至关首要栏目标三组链接、About
Us 文本、社交媒体图标,还有 Logo。

Bootstrap 2

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

□ 以导航条配色为根基增强了页脚的配色。

(7)
最终,调整社交媒体图标。就是添加一些上内边距,调整一下颜色,以便与新配色方案协调一致。因为图标使用的是
Font Awesome 字体,所以倘诺调整颜色和背景颜色的值即可: 

Bootstrap 3

最后,大家把公文转换为大写方式,稍微收缩一点,再加粗。

要兑现内容从视觉上的支行,可以调整栏宽、字体大小,还有颜色。大家先从调整栏宽发轫。

2.3 调整导航条

说做就做。打开 html 文档,在页头区添加实用导航项的标记,放在
banner-brand 元素前面。以下是完整的标志,起初是 header 标签:

下边我们要求调整 Logo,让它只在要求时显得。

Bootstrap 4

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

很强烈,大家还需求解决过分拥挤的题目,也就是要对除显示器阅读器之外的装备隐藏链接文本。在折叠后的导航条中,图标本身就足以传递意图了,何况还足以把图标弄得更大一部分。

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

可以观望作用如下:

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

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

3.调动响应式导航

(5)
最终,大家编辑下其按钮的水彩,把按钮的背景颜色改为浅粉黄色,同时调整字体颜色和边框:

.content-primary {
  font-size:@font-size-large;
}
<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>

那般就暗藏了 span 标签中的文本,屏幕少将只剩图标。

5.1 调整响应式导航条

7.犬牙相制的页脚

Bootstrap 5

 

@import "_buttons-custom.less";

打开 _variables.less ,搜索//
Navbar,在这边看到导航条用到的变量。那里指定的超过一半标准值既对折叠后的响应式导航条有效,也对宽显示屏下增加的导航条有效。

Bootstrap 6Bootstrap 7

Bootstrap 8

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

 

保留编译后,可以查阅到展现效果如下:

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

Bootstrap 9

 

(3) 保存修改,刷新网页。能够看看,在中、大型视口中,只会浮现banner-brand 中的 Logo:

后日导航条蕴含7项,每项又各有子菜单,显示了一个重型复杂网站的急需。

再看看大家的宏图在小屏幕单栏布局时的楷模:

.utility-nav { ...
  > a { ...
    @media (max-width:(@grid-float-breakpoint - 1)){
     span { .sr-only(); }
    }

(2) 在 _banner.less 中添加针对那几个 span
标签的传媒询问。在选取LESS的景色下,可以准确的嵌套媒体询问。在此要运用
@grid-float-breakpoint 变量,把 max-width 查询设置为
@grid-float-breakpoint -1
,因为那么些变量的值意味着在它那么宽时,导航条就会从折叠变成扩大状态。在这些媒体询问中,使用实用类
sr-only
作为混入,对除屏幕阅读器之外的保有装备隐藏文本。(参考文档:http://getbootstrap.com/css/#helper-classes-screen-readers

今昔我们得以观察起突显效果如下:

(4) 编辑 Logo 链接,将其类名由 navbar-brand 改为 banner-brand
。然后把图纸宽度改为180

//// 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;
          }
        }
      }
    }
  }
}

为了杰出主栏,大家首先主栏内容的字体大小。

保留并在小视口中测试,可以看到结果如下:

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%);
}

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

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

俺们先从准备标记最先。页脚的目标是对用户尽可能有用,大家修改页脚代码如下:

(1) 打开 _variables.less ,修改 @brand-primary,并新增肉色的
@brand-feature。

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

视口在768px到980px时期时的布局,Bootstrap
把这些距离界定为小断点,对应变量 @screen-sm 和
col-sm-网格类。在那些增幅内,单栏布局会造成不须求的空域,如下图所示:

接下去,须求把右手的 All Departments链接到左侧(折叠状态下)。Bootstrap
专门有一个类就是为着那么些目的。

接下去,大家必要对布局举办相对地点的调动。

</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) 打开 _variables.less,修改变量 @font-size-large。

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.调动配色

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

下边我们就从上到下,先来落实复杂的页头区,在前一个项目标底蕴上包括以下特征:

Bootstrap 10

  //Make columns clear floats in narrow viewport single-colomn layout
  @media (max-width: @screen-sm-min){
     [class*="col-"]{
       clear: both;
     }
  }
@link-hover-color: lighten(@link-color, 15%); //edited
//// Banner Area Styles
//
header[role="banner"]{
  .utility-nav {
    position: absolute;
    top: 0;
    right: 0;
  }
}

6.1 调整中、宽布局

保留,编译,刷新。以下是页脚在中大型显示器中的结果:

□ 在机械和手机屏幕中,突显在响应式导航条内部。

 

7.3 修整细节

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

Bootstrap 11

那样,主内容区收工了。

这一次大家又精通了部分使用 Bootstrap 的新技巧。不难总计如下:

 

一经按照区域划分,可以将这一个网站的主页分成三片段。

Bootstrap 12

咱俩想在中大视口(992px及以上)内保存三栏,而且希望第一栏比另两栏宽。

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

1.
预备启动文件

修改下 _footer.less 中往日的体裁文件如下:

Bootstrap 13

 

@navbar-height:          44px;  
...
@navbar-default-color:   @text-color;
@navbar-default-bg:      #fff;

接下去,大家要把 All Departments
菜单挪到导航条的最右端,让它与其余菜单保持最大距离。

□ 构建了一个参差不齐的页脚,有效地社团了四个链接块,还有跨视口的文书段落。

只要我们在刚刚完工的客户相会中做出了承诺,要把主页内容分成三层,根据重点程度排序。

眼前,在中款时口中,三栏是等宽的,而且字体大小、按钮大小,还有颜色都一致。结果就是从未层次感。

7.2 调整布局适应平板

5.调动折叠后的导航条配色

 

咱们先来调动标题,以便它们清除自己上方的按钮,近日那些按钮都生成了右边。为此,要使用以前新建的用于管理页面内容细节的
_page-content.less。

(3) 再调整 navbar-toggle 的体裁,删除边框和背景,调深导航条:

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


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

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

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

 

Bootstrap 14

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

开辟 html 文档,找到包涵 All Departments 的号子,把 类 pull-right 改为
navbar-right 就可以了。

在这么些设计方案里,Logo 可能出现在多少个地方,视意况而定:

要大功告成以上工作,得写一些机关以的体裁。大家准找层叠原理,先写一些对准页脚的通用规则,然后在连接到独特规则。

让我们伊始吧。

(5) 接着,再去掉链接列表前的门类标志:

Bootstrap 15Bootstrap 16

然后是在小显示器中的效果:

Bootstrap 17

Bootstrap 18

 能够看出显示效果中导航条两端的圆角,大家要求把那么些样式去掉。为此,打开
_variables.less,修改变量 @navbar-border-radius:

8.小结

Bootstrap 19

<a class="banner-brand visible-md visible-lg" href="#">
  <img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>

(3) 然后再开展一些细节调整:

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

□ 删除悬停时的下划线。

维持修改并刷新页面,就可以观察效率了:

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

(1) 打开
html文件,我们可以看来我们的分栏都是的类 col-sm-4。那代表近来栏是父元素宽度的三分之一,从小视口(764px)及以上增幅开首。

 

6.5 针对四个视口举办微调

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

6.3 增大主栏

□ 将页头区 container 的永恒格局设置为 relative,以使它包括相对定位的
utility-nav 元素。

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

(5) 保存修改,刷新突显,就能够在导航条上边看到新的Logo了:

□ 修整三组链接的外观;

窄屏显示效果如下:

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

下面的 fa-user 和 fa-shopping-cart 类添加了 Font Awesome
的用户和购物车的图标,并由此 fa-lg 类把它们的尺码增大了33%。关于增大
Font Awesome
图标的详尽表明,可以参见它的文档:http://fontawesome.io/examples/#larger

(5) 保存,编译。那样我们的下拉菜单伊始成功。展现效果如下:

@btn-feature-color:    #fff;
@btn-feature-bg:       @brand-feature;
@btn-feature-border:   darken(@btn-feature-bg, 5%);

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

那样,大家需求做以下那么些事。

 

(1) 首先,在内容上下各拉长一些内边距。给 main
添加一些内边距,那一个内边距适用于拥有视口,所以不必拔取媒体询问:

□ 为.banner-brand 类添加上内边距,以充实页头区的冲天。

对于页脚,大家还想修复多少个地点:

    <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>
// Navbar toggle
@navbar-default-toggle-hover-bg:       transparent;
@navbar-default-toggle-icon-bar-bg:    @gray;
@navbar-default-toggle-border-color:   transparent;

Bootstrap 20

(6) 再然后,调整底部的Logo,使其居中:

2.页头区

 

Bootstrap 21

 

那般,现在页面的层次已经很清晰了,从左到右几回是主内容、此内容和第三栏。

说到底是在超小屏幕中的效果:

作为起点,大家修改原来的主页内容,把其分成三栏,并适当添加内容,修改后代码如下:

修改后效果如下:

前天在980px及更大的视口中,页脚中的栏如下所示:

 

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

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

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

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

(2) 根据如下所示调整变量:

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

(3) 保存,刷新,可以看来以小幅分层的三栏:

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

footer

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

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

(4) 再接着,把第三栏的兼具按钮的 btn-primary 类改为 btn-default,并运用
btn-xs 收缩其尺寸:

(3) 保存文件,并在 __main.less 导入此文件:

.btn-feature {
  .button-variant(@btn-feature-color;@btn-feature-bg;@btn-feature-border);
}

(3) 打开 _banner.less 并累加一个新的带注释的区块:

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

完了上述调整的体制规则如下:

Bootstrap 22


构建了自定义的响应式实用导航条,文本和图标都能创立性地适应较大和较小的显示屏。

□ 调整前后面距;

页脚区:包罗多栏链接和音讯。

Bootstrap 23

设置完这么些变量后,大家要考虑让 banner-brand 只在中、大型视口中显示,而让
navbar-brand 只在小和超小型视口中显得。Bootstrap
为此提供了一组响应式实用类,具体能够参考在线文档:http://getbootstrap.com/css/#responsive-utilities (汉语文档:http://v3.bootcss.com/css/#responsive-utilities

 

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

□ 使用导航区。

于是,实用导航就会冒出了:

在小型和超小型视口中,只会显得 navbar-brand 中的 Logo:

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

(3) 然后给主页的第三栏应用该类:

7.1 准备标记

(2) 然后没成立一个文本来保存自定义按钮的体制。新建 _buttons-custom.less
文件并基于 bootstrap/buttons.less 中的混入写一个底下那样的混入调用:

@navbar-height: 50px;

(1) 打开 _variables.less,找到注释 Inverted
navbar,会发觉一些与默认导航条所用类似的变量。大家就通过它们来给伸张后的导航条应用颜色。

 

(1)
【Bootstrap】2.创作显示站点 的个人站点作为起源。

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

 

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

为此要调整部分变量的默许值,然后再创设一些新变量,只使用给扩张后的导航条。

□ 在桌面和宽显示屏中,突显在导航条上方;

Bootstrap 24

□ 而在平板统计机的视口中,并排的只有两栏,第三栏水平放到它们下边。

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

@brand-primary: #3e7dbd;    //edited blue
@brand-feature: #c60004; //added new red

(2)
那样就撤销了标题标签的转移,并使三栏的最顶部标题对齐,器呈现效果如下:

@media (min-width: @grid-float-breakpoint){
  .navbar-default {
    .navbar-inverse();
    .navbar-nav > li > a {
      text-transform:uppercase;
      font-size:82%;
      font-weight: bold;
    }
  }
}

保留编译后,可以看看在中大型显示器中,可以见见导航条的绿色背景和浅色文本:

2.2 把 Logo 放到导航条上方

Bootstrap 25

 

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

Bootstrap 26

□ 向左浮动列表项

(1) 把 visible-md visible-lg 添加到 banner-brand 类后面:

main

就算这么些网站网站各有特色,但共同的某些就是它们都很复杂。

Bootstrap 27

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

接下去需求解决它会遮挡 navbar-toggle
按钮的问题。把按钮移到导航条左边就行了,修改 _navbar.less ,找到注释 //
Navbar toggle,修改.navbar-toggle 采纳符的值:

5.2 调整水平导航条

□ 为页面的主内容设计了响应式布局,是三栏内容主次显著。

Bootstrap 28

在小屏幕中,导航条折叠后 utility-nav
会现身问题。最显眼的问题就是它会消退不见。

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

大家务必可以掌控这个复杂。为此,须求丰硕利用 Bootstrap
的12栏响应式系统。

其一媒体询问利用 @grid-float-breakpoint
变量确定了利用新规则的微乎其微视口宽度。因为大家已经在导航条中添加了
navbar-default 类,所以可以向来利用这么些类作为拔取符。混入
.navbar-inverse() 则把在 _navbar.less 中定义的体制 .navbar-inverse
应用给了那些媒体询问中的导航条。

(2)
然后,设置分栏在单栏布局时排除上方的变型元素。即使不设置,第二栏和第三栏可能会覆盖紧上方的按钮。那几个样式要卸载媒体询问中,以便限制它只利用到窄视口:

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

Bootstrap 29

Bootstrap 30

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

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

(1) 打开 html 文档,用 span 元素包围 utilility-nav 中各类链接的文件:

(3) 把这一个 Logo 用 <div class=”container”>…</div>
包装起来,使其被限定在 Bootstrap 居中的网格内部。

(4) 在html文档中把第一栏的按钮的 btn-primary 类改为 btn-feature
类。并给按钮填上 btn-lg 类,使按钮变大些。

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

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

俺们要运用 Bootstrap 的 inverted-navbar 变量和体裁。

调动好这一个变量后,只要把它们选拔给增添导航即可。谓词得写几行自定义的LESS代码。考虑到那种颜色切换属于页头区配色的变迁,所以大家把代码写到
_banner.less 中。

保存修改并编译。把浏览器窗口调整到桌面创设大小,然后刷新。应该能见到
utility-nav 元素出现在页头区的右上角位置。

修改后,中宽屏显示效果:

封存后编译,就足以看出效果了:

 

要让 utilility-nav 显示。必须给她安装一个比导航条更大的 z-index,前者在
_variables.less 中被装置为1000.大家得以在 _banner.less 中,把
.unlility-nav 的 z-index 设置为 1999.

其一变量支配了导航条在窄视口中折叠,在宽视口中展开。在大家的其实中,考虑到导航的繁杂,须求在近似的下一个较宽的断点折叠导航条。因而,要求把变量的值设置为 @screen-md-min。

操作步骤是:我们先把 All Departments 菜单移除父元素 ul,并列排在原父元素
ul 后;然后使其包括在新的 ul 标签内,新标签的类名为 “nav navbar-nav
pull-right”。

 

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

先做最基本的干活 —— 准备项目标启动文件。

Bootstrap 31

2.4 添加运用导航

(3)
再附加图标尺寸,并在笔直方向上平添一些行高。同样还在那么些媒体询问中写样式:

(1) 根据文档,大家落到实处率先个下拉菜单的代码如下:

上面大家就按照须要来行使这几个类。

6.4 调整第三栏

Bootstrap 32

很明朗,中间和第三栏的按钮并从未去掉。下一步就来调整这么些按钮,还有字体大小。

<a class="navbar-brand visible-xs visible-sm" href="#">
  <img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>
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;
    }
  }
}

 

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

在较小的显示器中,则把相应的链接图标显示在折叠后的导航条的最右端,如下图所示:

 

(1) 首先,准备一组新的按钮变量。在 _variables.less 中,//==
Buttons上面,复制多少个 @btn-primary-变量,将 -primary- 改为 -feature-
,并选拔 @brand-feature 作为背景观:

(2) 把 visible-xs visible-sm 添加到 navbar-brand 类后面:

俺们期望网站的配色是正规的铺面网站颜色:蓝、红、灰。下边我们把这个颜色放到变量里。

□ 在较窄的视口中,那一个栏将从上到下排成一栏。

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

□ 删除无体系表的品种标志。

Bootstrap 33

(2) 然后调整链接的停下颜色,使其比 @brand-primary 稍浅:

Bootstrap 34

俺们期望折叠后响应式导航条的背景、文本和链接颜色和默许值基本一致,但在中大型视口中变成青色背景、浅色文本。

 

@navbar-border-radius:  0;

上一章有对个人小说站点举行部分优化。本章,轮到大家增添那个文章站点了,补充部分品种,从而显示大家的力量。换句话说,大家要构建一个针锋相对复杂的商号网站主页。

在 _banner.less 中,把之类代码添加到 .navbar-inverse() 混入后:

以下是我们打算要布局的筹划在中、宽视口中的成效:

在大中型显示器中,导航条水平排列在 Logo 上面。大家愿意此时的导航条展现@brand-primary
变量中设置的紫色背景。为此,必须求翻转链接和文件的颜料,即由浅变深。

Bootstrap 35

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

主内容区:这一有些布局复杂,至少三栏。

可以观看导航条是由下拉菜单的,所以我们先修改下相应的导航条。很肯定,导航项应用了下拉菜单。大家得以参见下官方文档,先已毕下拉菜单。 

Bootstrap 36

(2)
向下找到导航条链接区,调整颜色让链接颜色与导航条文本颜色相同,并给移动链接添加一点背景观:

 Bootstrap 37

Bootstrap 38

 在中大型的视口中,我们把它们放到页头区的右上角,如下图所示:

<a class="btn btn-feature btn-lg  pull-right" href="#">
//Apply .navbar-inverse styles to the enpanded navbar
@media (min-width: @grid-float-breakpoint){
  .navbar-default {
    .navbar-inverse();
  }
}

(2)
现在开端添加针对复杂页脚的样式。首先,收缩页脚字体大小,反转颜色与导航条对应——黑色背景,浅色文本。我们先设置成那样的颜料,然后再把它们有些调暗一点。

Bootstrap 39

@media (max-width:(@grid-float-breakpoint - 1)){
  span {
    .sr-only();
  }
  .icon {
    font-size: 2em;
     line-height: 1.2;
  }
.content-tertiary {
  font-size:@font-size-small;
}

在窄视口呈现效果如下:

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

Bootstrap 40

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

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

咱俩还索要调整下第三栏,减弱其字体,同时让按钮不那么卓越。

Bootstrap 41

2.1
包蕴下拉菜单的导航项

//=== 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%);

 

那些调整适合中大型的视口。下边我们针对折叠后的响应式导航条来添加样式。

不管在什么样视口,经常都应有在页面中提供部分留白。此外,每个区块的边框最好也装有标示。

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

 

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

(4) 然后是多少个h3标题,调整它们的字号,去掉外边距,并把公文转换成大写:

接下去调整按钮的水彩,要用到革命的 @brand-feature 变量。还必要运用
Bootstrap 在 mixins.less 中提供的有利的混入。

相关文章