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

image

  • 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

posted @   Zhentiw  阅读(511)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae