<header role="banner"> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> <a href="https://www.jb51.net/index.html"><img src="https://www.jb51.net/img/logo.png" alt="Bootstrappin'"></a> </div> <div> <ul> <li><a href="#welcome">Welcome</a></li> <li><a href="#features">Features</a></li> <li><a href="#impact">Impact</a></li> <li><a href="#signup">Sign Up</a></li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container --> </nav> </header>
目前中、大视口的显示效果如下：
小视口的显示效果如下：
我们需要改变下样式。
(1) 我们先打开 _navbar.less 调整下样式，我们需要把折叠按钮移回右侧：
.navbar-toggle { ... float: right; margin-right: @navbar-padding-horizontal; ...
然后调整下折叠按钮，与左侧的图标以及导航条保持一致：
// Bars .icon-bar { display: block; width: 24px; //edited height: 3px; //edited border-radius:0; //edited }
接着我们修改下，中、大视口下导航条标签的内边距：
// Uncollapse the nav @media (min-width: @grid-float-breakpoint) { ... > li { ... > a { padding-top: ((@navbar-height - @line-height-computed) / 2); padding-bottom: ((@navbar-height - @line-height-computed) / 2); padding-left: 24px; // added padding-right: 24px; // added text-transform: uppercase; // added } ...
(2) 接着，我们打开_variables.less 文件，调整针对导航条的变量。
我们调整下导航条的高度：
// Basics of a navbar @navbar-height: 56px; // edited
然后，修改下小视口导航条的颜色和悬停颜色：
// Navbar links @navbar-default-link-color: @navbar-default-color; @navbar-default-link-hover-color: #fff; // edited @navbar-default-link-hover-bg: @gray; // edited @navbar-default-link-active-color: #fff; // edited @navbar-default-link-active-bg: @gray-dark; // edited ...
现在，小视口的效果如下：
(3) 然后，我们打开 __main.less文件去掉之前导入的，但现在不需要的LESS文件。
//Other custom files @import "_page-content.less"; @import "_footer.less"; //@import "_banner.less"; //@import "_buttons-custom.less";
现在，中、大视口的效果如下：
5.页脚
代码很简单，和之前一样：
<footer role="contentinfo"> <div> <p> <a href="https://www.jb51.net/bootstrap-code-06.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrappin'"> </a> </p> </div> </footer>
我们需要简单的修改下样式，打开 _footer.less文件，去掉之前的字体大小样式和蓝色背景：
footer[role="contentinfo"] { padding-top: 20px; padding-bottom: 20px; //font-size:@font-size-small; //background-color:darken(@navbar-inverse-bg,18%); ...
这样就可以了，显示效果如下：
6.定制高清图
下面我们可以实现主内容部分了。我们先自定义高清图，显示客户的大号欢迎语，同时要对标记进行一番调整。包括添加大背景图，放大欢迎语，然后调整其在多视口中的外观。
我们简单实现内部代码：
<section> <div> <h1><strong>Big</strong> Welcome Message</h1> <p>Ingenious marketing copy. And some <em>more</em> ingenious marketing copy. <a href="#features"> Learn more <span></span></a></p> </div> </section>
显示效果如下：
我们需要做的第一步就是扩大显示区的高度，把高清图放进去。
(1) 打开 less/_page-content.less 文件，设置 #welcome 部分的高度、背景颜色和字体颜色，同时也为按钮添加一些上外边距：
#welcome { height: 300px; background-color: #191919; color: #fff; .btn { margin-top: 16px; } }
接下来，我们使用媒体查询为中大屏幕添加背景图片（根据目前 Bootstrap 媒体查询默认的断点值，大屏幕指 991px 以上）。
(2) 我们先利用LESS，在#welcome 的上下文中嵌套一个媒体查询。
#welcome { ... @media (max-width: @screen-sm-max) { background: #191919 url('../img/subway-906x600.jpg') center center no-repeat; } }
现在可以显示背景图了，但是只会在非大视口（默认值屏幕宽度为911px 或更小）才会显示：
