您的位置:88bifa必发唯一官网 > 必发88首页 > [Bootstrap] 4. Typogrphy

[Bootstrap] 4. Typogrphy

发布时间:2019-05-22 01:23编辑:必发88首页浏览(133)

    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?

    图片 1

    • 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='http://www.beijingbyd.com/uploads/allimg/190522/01233T046-1.jpg'></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:

    图片 2

     


    图片 3

    图片 4

    图片 5

    图片 6

     

    Links: 


    本文由88bifa必发唯一官网发布于必发88首页,转载请注明出处:[Bootstrap] 4. Typogrphy

    关键词: 必发88首页

上一篇:运行结果为 true

下一篇:没有了