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

[Bootstrap] 4. Typogrphy的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

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

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

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

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

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

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

随机推荐

  1. YQL

    YQL,(Yahoo! Query Language)是一种支持对互联网上的数据进行查询.过滤.连接.类似SQL语法的简单语言.用YQL官方的话:有了YQL,开发人员只需要使用一种 简单的查询语言即可 ...

  2. MATLAB函数表（转自：http://bbs.06climate.com/forum.php?mod=viewthread&tid=16041&extra=page%3D4）

    MATLAB函数表 4.1.1特殊变量与常数 ans 计算结果的变量名 computer 确定运行的计算机 eps 浮点相对精度 Inf 无穷大 I 虚数单位 inputname 输入参数名 NaN ...

  3. 【转】Parallels Desktop 11.2.0 破解版 最佳Mac虚拟机软件

    原文网址:http://www.macappstore.net/parallels-desktop-11-pojie-ban/ Parallels Desktop 11.2.0 破解版 最佳Mac虚拟 ...

  4. DOM事件逐层上机传递

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. colspan在浏览器中失效的问题

    <table border=" style="border-collapse:collapse;"> <tr> <td>def< ...

  6. 也用 Log4Net 之将日志记录到数据库的后台实现 （二）

    也用 Log4Net 之将日志记录到数据库的后台实现 (二)  大家下午好,昨天讲了配置,今天我们讲讲后台实现,在完成了后台实现后,我们才能真正意义上的解决把自定义属性字段值录入到数据库中. 在开写之 ...

  7. 从linux启动到rootfs的挂载分析

    简单的来说,根文件系统包括虚拟根文件系统和真实根文件系统.在Kernel启动的初始阶段,首先去创建虚拟的根文件系统,接下来再去调用do_mount来加载真正的文件系统,并将根文件系统切换到真正的文件系 ...

  8. js会飞的li标签

    当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. NOIP算法总结

    前言 离NOIP还有一个星期,匆忙的把寒假整理的算法补充完善,看着当时的整理觉得那时还年少.第二页贴了几张从贴吧里找来的图片,看着就很热血的.旁边的同学都劝我不要再放PASCAL啊什么的了,毕竟我们的 ...

  10. Hubot Slack CoffeeScript

    公司买了一台Mac Pro,为了物尽其用,研究了半天把hubot-slack装好了,然后又花了点时间学习CoffeeScript(照着例子写也足够了).用slack来发版本还是很爽的.