正文

[Bootstrap] 4. Typogrphy

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

What is Typography

When we talk about typography, it's a big subject! Which of the following fall under the umbrella of typography?

  • Choosing a font face for our website.

  • Setting the line height of our text.

  • Adding Bootstrap classes to change the style of specific text.

  • Using icons that come from a font file.

  • All of the above

Default Font Size

Bootstrap changes the font-size of our body , which affects quite a lot of the page. What font-size does Bootstrap use by default?

The default font-size is: 14px

Using Glyphicons

If we wanted to use a Glyphicon, what class (or classes) would we need to apply to show the following "plane" icon?

  • glyphicon

  • glyphicon-plane

  • glyphicon and glyphicon-plane

  • plane-glyphicon

  • glyphicon and plane-glyphicon

Finishing Our Footer

Our footer needs a bit more work. How about we add a bit more flair to it by focusing on the typography? Finish the following tasks to finish our footer. 

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

        </div>

      </div>

      <div class='row'>

        <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'>Take the Tour</button>

          <button type='button'>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='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</a></p>

          </div>

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

            <h4>Links</h4>

            <ul>

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

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

              <li>Orlando, FL</li>

              <li>1-555-blast-off</li>

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

Let's remove all of the bullet icons from our footer. To do this, update all of the unordered lists to use the appropriate Bootstrap class.

Using 'list-unstyled' for the <ul>: 

<ul class="list-unstyled">

Time to add some icons! Add the "arrow-right"  icon after the "More About Us" text in the footer. 

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

We could add some icons next to our location details in the "Contact Us" section as well, starting with one right before "Orlando, FL".

Head over and check out the available glyphs on the Bootstrap webpage. Look for either a world icon  or a map icon marker  and add that immediately before "Orlando, FL". 

<li><i class="glyphicon glyphicon-map-marker"></i>Orlando, FL</li>

Next to our phone number, add the "phone" icon. 

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

Next to our email address, add the "envelope" icon. 

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

Result:

--------------

Links: http://getbootstrap.com/components/#glyphicons-glyphs

相关阅读

目录[+]