Too Much Navigation?

How many of Bootstrap's Navigation Components can we use on a page?

  • 0

  • 1

  • More than 1

Navigation Homepage Link

The very top left of our page is a great place for a logo and a link to our site's homepage. What is the Bootstrap class that is used for positioning and styling this element?

Answer: navbar-brand

Nav or Navbar

Take a look at the following screenshot. Is this using Bootstrap's Nav Component, Navbar Component, or both?

  • Nav Component

  • Navbar Component

  • Both

Here's another screenshot of the Meteor website. These links show up at the very top of the page. Is this using Bootstrap's Navbar Component, Nav Component, or both?

  • Navbar Component

  • Nav Component

  • Both

Nav Type

Take a look at the following use of Bootstrap's .nav class. A second Bootstrap Nav class is being applied in this case to add some extra functionality to this list.

What class is being used? Answer: nav-tabs

Here are those same links as before but using a different Bootstrap Nav class. Take a look and let us know what class is being used for styling the links to have these rounded corners.

What class is being used? Answer: nav-pills

Adding Our Navigation

Time to focus on navigation! For this one, we'll recreate the Navigation Component from the video. We've gone ahead and added a list of links in the header as a starting point, but it's looking a little ugly. Follow the tasks to create a functional navigation for our site.

<!DOCTYPE html>

<html>

  <head>

    <title>Blasting Off With Bootstrap</title>

    <link href='css/bootstrap.min.css' rel='stylesheet'>

    <link href='css/main.css' rel='stylesheet'>

  </head>

  <body>

    <div class='container'>

      <div class='row'>

        <div class='col-md-12'>

          <h1>Blasting Off with Bootstrap</h1>

          <ul>

            <li><a href='tickets.html'>Tickets</a></li>

            <li><a href='stations.html'>Stations</a></li>

            <li><a href='about.html'>About</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class='container'>

      <div class='row well well-lg'>

        <div class='col-md-6'>

          <h2>The Fastest Way to Space</h2>

          <p class='lead'>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>

          <button type='button' class='btn btn-lg btn-default'>Take the Tour</button>

          <button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button>

        </div>

        <div class='col-md-6 visible-md visible-lg'>

          <img src='images/img-header.jpg' alt='Blast off with Bootstrap' />

        </div>

      </div>

      <div class='row text-center features'>

        <div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>

          <i class='glyphicon glyphicon-briefcase'></i>

          <h3>Book Today!</h3>

          <p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p>

        </div>

        <div class='col-sm-4 col-xs-6'>

          <i class='glyphicon glyphicon-random'></i>

          <h3>Go Anywhere</h3>

          <p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p>

        </div>

        <div class='col-sm-4 col-xs-6'>

          <i class='glyphicon glyphicon-send'></i>

          <h3>RocketBus&reg;</h3>

          <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on your wallet, and easiest way to make friends.</p>

        </div>

      </div>

    </div>

    <div class='quote'>

      <div class='container'>

        <blockquote>

          <p>Any sufficiently advanced technology is indistinguishable from magic.</p>

          <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>

        </blockquote>

      </div>

    </div>

    <div class='container transport-systems'>

      <div class='row'>

        <div class='col-md-10 col-md-offset-1'>

          <h2>Our Transport Systems</h2>

          <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>

        </div>

      </div>

      <div class='row text-center'>

        <div class='transporter col-md-3 col-md-offset-1 well well-sm'>

          <h3>Transporter</h3>

          <ul class='list-unstyled'>

            <li>8 second travel time</li>

            <li>Chance of death only 1 in 7,593</li>

            <li>Low price of only $15.99!</li>

          </ul>

          <p><button class='btn btn-info'><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>

        </div>

        <div class='space-elevator col-md-3 col-md-offset-1 well well-sm'>

          <h3>Space Elevator</h3>

          <ul class='list-unstyled'>

            <li>8 hour scenic ride</li>

            <li>Only 1 horrific death per 12,456</li>

            <li>Only $45.99 if you book today!</li>

          </ul>

          <p><button class='btn btn-info'><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>

        </div>

        <div class='rocketbus col-md-3 col-md-offset-1 well well-sm'>

          <h3>RocketBus</h3>

          <ul class='list-unstyled'>

            <li>8 minute scenic ride</li>

            <li>Plunging death rate of under 1/100k</li>

            <li>$74.99 lets you blast off today!</li>

          </ul>

          <p><button class='btn btn-info'><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>

        </div>

      </div>

    </div>

    <div class='footer'>

      <div class='container'>

        <div class='row'>

          <div class='col-md-3 col-sm-4 col-xs-6'>

            <h4>Who We Are</h4>

            <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>

            <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>

          </div>

          <div class='col-md-offset-1 col-sm-2 col-xs-6'>

            <h4>Links</h4>

            <ul class='list-unstyled'>

              <li><a href='index.html'>Home</a></li>

              <li><a href='tickets.html'>Tickets</a></li>

              <li><a href='stations.html'>Stations</a></li>

            </ul>

          </div>

          <div class='clearfix visible-xs'></div>

          <div class='col-sm-2 col-xs-6'>

            <h4>Stay in Touch</h4>

            <ul class='list-unstyled'>

              <li><a href='about.html'>About</a></li>

              <li><a href='contact.html'>Contact Us</a></li>

              <li><a href='/blog'>Blog</a></li>

              <li><a href='http://twitter.com/codeschool'>Twitter</a></li>

              <li><a href='http://facebook.com/codeschool'>Facebook</a></li>

            </ul>

          </div>

          <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>

            <h4>Contact Us</h4>

            <ul class='list-unstyled'>

              <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>

              <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>

              <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>

            </ul>

            <p>Blasting Off With Bootstrap &copy;2214.</p>

          </div>

        </div>

      </div>

    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

    <script src='js/bootstrap.min.js'></script>

  </body>

</html>

Even though our navigation is working, it's not pretty.

Create a new div above our "container" div that uses Bootstrap's Navigation class. We'll use this as a starting point for our Navigation Component.

<div class="navbar">

 ...

</div>

Our navbar is looking a bit plain. Go ahead and add a class to it that'll turn it a default grey color.

<div class="navbar navbar-default">

 ...

</div>

If we open our page now, we'll see that our .navbar element actually has rounded corners around it. Since it's at the top of the page, most people might not notice, but it's still an issue we should take care of.

Add another class to our Navigation Component that will indicate it's positioned at the top of the screen. It should disappear as the page scrolls.

<div class="navbar navbar-default navbar-static-top">

 ...

</div>

Time to get down to content. We want a link to our homepage rather than an h1 tag there. Change this tag to a link to our homepage (which is at index.html) and give it a Bootstrap class used for site titles and logos.

<a href="index.html" class="navbar-brand">Blasting Off with Bootstrap</a>

Our list of links in our header is going to show up with bullets next to them – not exactly what we want. Add (3) classes that will affect it in the following ways:

  • Use Bootstrap's Nav Component.
  • Indicate that this Nav Component is being used within a Navbar Component.
  • Position the Nav Component all the way to the right side of the Navigation.
<ul class="nav navbar-nav navbar-right">

Finally, now that our navigation is wrapped in a Navigation Component, we no longer need to use grids in our navigation. Remove all elements in our nav associated with grids.

   <div class="navbar navbar-default navbar-static-top">

    <div class='container'>

          <a href="index.html" class="navbar-brand">Blasting Off with Bootstrap</a>

          <ul class="nav navbar-nav navbar-right">

            <li><a href='tickets.html'>Tickets</a></li>

            <li><a href='stations.html'>Stations</a></li>

            <li><a href='about.html'>About</a></li>

          </ul>

    </div>

    </div>

Using A Tabbed Nav

We've added another area on the page for travelers to have a bit more help in planning out their trip. To do this, we'll be using Bootstrap's Nav Component with tabs. The JavaScript to make this function was already added to the bottom of the page for us.

<!DOCTYPE html>

<html>

  <head>

    <title>Blasting Off With Bootstrap</title>

    <link href='css/bootstrap.min.css' rel='stylesheet'>

    <link href='css/main.css' rel='stylesheet'>

  </head>

  <body>

    <div class='navbar navbar-default navbar-static-top'>

      <div class='container'>

        <a href='/' class='navbar-brand'>Blasting Off With Bootstrap</a>

        <ul class='nav navbar-nav navbar-right'>

          <li><a href='tickets.html'>Tickets</a></li>

          <li><a href='stations.html'>Stations</a></li>

          <li><a href='about.html'>About</a></li>

        </ul>

      </div>

    </div>

    <div class='container'>

      <div class='row well well-lg'>

        <div class='col-md-6'>

          <h2>The Fastest Way to Space</h2>

          <p class='lead'>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>

          <button type='button' class='btn btn-lg btn-default'>Take the Tour</button>

          <button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button>

        </div>

        <div class='col-md-6 visible-md visible-lg'>

          <img src='images/img-header.jpg' alt='Blast off with Bootstrap' />

        </div>

      </div>

      <div class='row text-center features'>

        <div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>

          <i class='glyphicon glyphicon-briefcase'></i>

          <h3>Book Today!</h3>

          <p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p>

        </div>

        <div class='col-sm-4 col-xs-6'>

          <i class='glyphicon glyphicon-random'></i>

          <h3>Go Anywhere</h3>

          <p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p>

        </div>

        <div class='col-sm-4 col-xs-6'>

          <i class='glyphicon glyphicon-send'></i>

          <h3>RocketBus&reg;</h3>

          <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on your wallet, and easiest way to make friends.</p>

        </div>

      </div>

    </div>

    <div class='quote'>

      <div class='container'>

        <blockquote>

          <p>Any sufficiently advanced technology is indistinguishable from magic.</p>

          <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>

        </blockquote>

      </div>

    </div>

    <div class='container transport-systems'>

      <div class='row'>

        <div class='col-md-10 col-md-offset-1'>

          <h2>Our Transport Systems</h2>

          <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>

        </div>

      </div>

      <div class='row text-center'>

        <div class='transporter col-md-3 col-md-offset-1 well well-sm'>

          <h3>Transporter</h3>

          <ul class='list-unstyled'>

            <li>8 second travel time</li>

            <li>Chance of death only 1 in 7,593</li>

            <li>Low price of only $15.99!</li>

          </ul>

          <p><button class='btn btn-info'><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>

        </div>

        <div class='space-elevator col-md-3 col-md-offset-1 well well-sm'>

          <h3>Space Elevator</h3>

          <ul class='list-unstyled'>

            <li>8 hour scenic ride</li>

            <li>Only 1 horrific death per 12,456</li>

            <li>Only $45.99 if you book today!</li>

          </ul>

          <p><button class='btn btn-info'><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>

        </div>

        <div class='rocketbus col-md-3 col-md-offset-1 well well-sm'>

          <h3>RocketBus</h3>

          <ul class='list-unstyled'>

            <li>8 minute scenic ride</li>

            <li>Plunging death rate of under 1/100k</li>

            <li>$74.99 lets you blast off today!</li>

          </ul>

          <p><button class='btn btn-info'><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>

        </div>

      </div>

    </div>

    <div class='container'>

      <div class='row'>

        <div class='col-md-10 col-md-offset-1'>

          <h2>Plan Your Trip Today!</h2>

          <ul>

            <li><a href='#time'>Today's Times</a></li>

            <li><a href='#deals'>Hot Deals</a></li>

            <li><a href='#forecast'>Forecast</a></li>

          </ul>

          <div class='tab-content'>

            <div class='tab-pane fade' id='time'>

              <p>Today's Time here</p>

            </div>

            <div class='tab-pane fade' id='deals'>

              <p>Deals here</p>

            </div>

            <div class='tab-pane fade' id='forecast'>

              <p>Forecast</p>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class='footer'>

      <div class='container'>

        <div class='row'>

          <div class='col-md-3 col-sm-4 col-xs-6'>

            <h4>Who We Are</h4>

            <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>

            <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>

          </div>

          <div class='col-md-offset-1 col-sm-2 col-xs-6'>

            <h4>Links</h4>

            <ul class='list-unstyled'>

              <li><a href='/'>Home</a></li>

              <li><a href='tickets.html'>Tickets</a></li>

              <li><a href='stations.html'>Stations</a></li>

            </ul>

          </div>

          <div class='clearfix visible-xs'></div>

          <div class='col-sm-2 col-xs-6'>

            <h4>Stay in Touch</h4>

            <ul class='list-unstyled'>

              <li><a href='about.html'>About</a></li>

              <li><a href='contact.html'>Contact Us</a></li>

              <li><a href='/blog'>Blog</a></li>

              <li><a href='http://twitter.com/codeschool'>Twitter</a></li>

              <li><a href='http://facebook.com/codeschool'>Facebook</a></li>

            </ul>

          </div>

          <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>

            <h4>Contact Us</h4>

            <ul class='list-unstyled'>

              <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>

              <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>

              <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>

            </ul>

            <p>Blasting Off With Bootstrap &copy;2214.</p>

          </div>

        </div>

      </div>

    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

    <script src='js/bootstrap.min.js'></script>

    <script>

      $(function() {

        $('.nav-tabs a').click(function (e) {

          e.preventDefault();

          $(this).tab('show');

        });

      });

    </script>

  </body>

</html>

Our "Plan Your Trip Today" section could be improved using a tabbed navigation. Go ahead and add the class that will use the Nav Component and specify the tabs style.

          <ul class="nav nav-tabs">

            <li><a href='#time'>Today's Times</a></li>

            <li><a href='#deals'>Hot Deals</a></li>

            <li><a href='#forecast'>Forecast</a></li>

          </ul>

If we open up our page now, we'll see that none of the tabs are being marked as active. Apparently, we need to indicate which of the tabs should be opened by default. To do that we'll need to add a class to both the tab link that we click on (withinul.nav) and the content that will be shown (within div.tab-content).

In order for our Tabbed Nav to know which tab is currently active, we need to add a class of "active" to the li and tab-pane elements. Go ahead and make the first tab active.

         <ul class="nav nav-tabs">

            <li class="active"><a href='#time' >Today's Times</a></li>

            <li><a href='#deals'>Hot Deals</a></li>

            <li><a href='#forecast'>Forecast</a></li>

          </ul>

          <div class='tab-content'>

            <div class='tab-pane fade active' id='time'>

              <p>Today's Time here</p>

            </div>

            <div class='tab-pane fade' id='deals'>

              <p>Deals here</p>

            </div>

            <div class='tab-pane fade' id='forecast'>

              <p>Forecast</p>

            </div>

          </div>

        </div>

[Bootstrap] 6. Navigation的更多相关文章

  1. [UI] 04 - Bootstrap: layout & navigation

    前言 一.资源 From: http://www.imooc.com/code/2881 Ref: http://www.runoob.com/try/bootstrap/layoutit/[拖拽布局 ...

  2. [Code::Blocks] Install wxWidgets & openCV

    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...

  3. 本人SW知识体系导航 - Programming menu

    将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...

  4. [Full-stack] 网页布局艺术 - Less

    故事背景 一个过程: template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-ui fle ...

  5. Bootstrap学习记录-1.Navigation

    Bootstrap中的导航栏功能需要添加bootstrap.css.jquery.js.bootstrap.js,其中,jquery.js文件是bootstrap.js文件中必须的,否则就会抛出异常信 ...

  6. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. Bootstrap框架的学习（二）

    一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.boot ...

  9. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

随机推荐

  1. Java多线程性能优化

    大家使用多线程无非是为了提高性能,但如果多线程使用不当,不但性能提升不明显,而且会使得资源消耗更大.下面列举一下可能会造成多线程性能问题的点: 死锁 过多串行化 过多锁竞争 切换上下文 内存同步 下面 ...

  2. 5个难以置信的VS 2015预览版新特性

    Visual Studio 2015 Preview包含了很多强大的新特性,无论你是从事WEB应用程序开发,还是桌面应用程序开发,甚至是移动应用开发,VS 2015都将大大提高你的开发效率.有几个特性 ...

  3. 20款最优秀的JavaScript编辑器

    毫无疑问SublimeText,Notepad++,webstorm等,是市面上最主导的编辑器,但当然也有一些更多的JavaScript编辑器提供众多的特性和功能,方便和轻松自由的编码.本文整理了20 ...

  4. shell 全局和局部变量

    /******************************************************************** * shell 全局和局部变量 * 声明: * 到目前为止, ...

  5. PSR-4——新鲜出炉的PHP规范

    FIG 制定的PHP规范,简称PSR,是PHP开发的事实标准. PSR原本有四个规范,分别是: PSR-0 自动加载 PSR-1 基本代码规范 PSR-2 代码样式 PSR-3 日志接口 2013年底 ...

  6. ShopNc商城修改详情

    1. 修改400电话.(400.png) a.位置:在页面顶部搜索的后面. b.修改文件: t/layout/home_layout.php 增标签 <img border=0 src=&quo ...

  7. c语言中静态区，栈，堆的理解

    对于程序员,一般来说,我们可以简单的理解为内存分为三个部分:静态区,栈,堆. 很多书没有把把堆和栈解释清楚,导致初学者总是分不清楚. 其实堆栈就是栈,而不是堆. 堆的英文是heap:栈的英文是stac ...

  8. 【转】 COCOS2D-X之使用CURL下载图片的一个简单Demo

    #include"curl/curl.h" #pragma  comment(lib,"libcurl_imp.lib") bool HelloWorld::i ...

  9. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  10. Uva11732（trie）

    题意:给你n个字符串 用strcmp()两两比较 ,求字符比较的总次数 分析: 数据量很大我们考虑用孩子兄弟表示法来表示字典树 #include <cstdio> #include < ...