書名： Bootstrap 4 Cookbook
作者名： Ajdin Imsirovic
本章字數： 112字
更新時間： 2021-07-02 21:08:08

How to do it...

Open chapter3/start/app/recipe3.ejs and add the following code to it:

      <div class="container bg-white mt-5 rounded">
      <h1>Chapter 3, Recipe 3:</h1>
       <p class="lead">Style Text Content with Bootstrap Typography  
       Classes</p>

      <!-- Let's apply the exisiting default Bootstrap styles to a  
      paragraph of text, as follows: -->

       <p class="display-4">This is just a regular paragraph.</p>
       <p class="display-3"><span class="text-muted">This is an example  
       of muted text</span>.</p>
       <p class="display-2">
       <span class="text-primary">All the </span>
       <span class="text-success"> contextual Bootstrap</span>
       <span class="text-info bg-primary"> colors have</span> 
       <span class="text-warning"> their specific</span>
       <span class="text-danger"> text color</span>
       <span class="text-white bg-inverse"> classes</span>.
       </p>
       <p class="h3">Just another h3 <mark>paragraph</mark>.</p>
       <p class="h3">And <mark>here is <span class="align-text- 
       bottom">another</span><span class="align-text-top"> one</span> 
       </mark>.
      </div>

      <!-- Let's play around with those now -->
      <div class="container mt-5">
       <div>
       <div class="d-inline">Lorem ipsum dolor sit amet, <span  
       class="d-block">consectetur</span> adipisicing elit. Dolor  
       ratione, voluptatibus debitis veniam rem suscipit.
       </div>
       </div>

      <div class="container mt-5">
       <!-- Use $font-family-base, $font-size-base, $line-height-base  
       attributes as our typographic base applied to the <body> -->

       <!-- Set the global link color via $link-color and apply link   
       underlines only on :hover -->

       <!-- These styles can be found within _reboot.scss, and the  
       global variables are defined in _variables.scss -->

      </div>

In main-03-03.scss, add the following code:

      .bg-white {
       background-color: white;
      }

In main.scss, uncomment the @include call to the scss file updated in step 2.
Run harp compile / harp server, and preview the recipe in your browser.

官术网_书友最值得收藏!

Bootstrap 4 Cookbook

How to do it...