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的更多相关文章

旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经把bootstrap了解个大概了,接 ...
旺财速啃H5框架之Bootstrap（一）
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

随机推荐

宏HASH_DELETE
HASH_DELETE(buf_page_t, hash, buf_pool->page_hash, fold, bpage); NAME 可理解为 void* next /********** ...
[原]Unity3D深入浅出 - 认识开发环境中的Component(组件)菜单
Component(组件)是用来添加到GameObject对象上的一组相关属性,本质上每个组件都是一个类的实例,比如在Cube上添加一个Mesh网格,即面向对象的思维方式可以理解成Cube对象里包含了 ...
禅道，然之和蝉知入驻VM Depot
Posted on 四月 21, 2015 by 陈阳近日, 易软天创与微软开放技术合作,在虚拟镜像中国站点vmdepot.msopentech.cn上成功部署易软天创的集成管理环境,为希望快速基于 ...
Java [Leetcode 43]Multiply Strings
题目描述: Given two numbers represented as strings, return multiplication of the numbers as a string. No ...
(一)学习JavaScript之setTimeout方法
参考:http://www.w3school.com.cn/jsref/met_win_settimeout.asp HTML DOM Window 对象定义和用法 setTimeout() 方法用 ...
java、myeclipse常见错误的解决（未完）
1.报错java.lang.NoClassDefFoundError ,但是相关jar包已经导入工程. 解决方案:将jar包放入C盘tomcat上部署的相应项目中的WEB-INF/lib中.web容器 ...
[Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.3.7
For every matrix $A$, the matrix $$\bex \sex{\ba{cc} I&A\\ 0&I \ea} \eex$$ is invertible and ...
Hapoop原理及MapReduce原理分析
Hapoop原理 Hadoop是一个开源的可运行于大规模集群上的分布式并行编程框架,其最核心的设计包括:MapReduce和HDFS.基于 Hadoop,你可以轻松地编写可处理海量数据的分布式并行程序 ...
怎么限制Google自动调整字体大小
Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明确指定字体大小,则在chrome浏览器里字体显示是12px. 最近在写代码玩的时候,我也碰到了在FF和 ...
Bzoj 4556: [Tjoi2016&Heoi2016]字符串
4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 177 Solved: 92[Sub ...