zoukankan html css js c++ java

[Bootstrap] 4. Typogrphy

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

查看全文

相关阅读:
poj 1226
在Excel中创建和使用ServerDocument
Linux进程管理—信号、定时器
 《linux程序设计》--读书笔记--第十四章信号量、共享内存和消息队列
 POJ 1054 The Troublesome Frog
boost库在工作（37）网络UDP服务端之七
 指纹增强程序Hong_enhancement
读书笔记——Windows核心编程（15）在应用程序中使用虚拟内存
 蓝牙技术谈之调频技术（一）
android使用全局变量的两种方法

原文地址：https://www.cnblogs.com/Answer1215/p/4314769.html