【Bootstrap Learning】-3 字体 Typography

1. 选择 Documentation-- 选择 Content  -- 选择 Typography

2. px，em，rem的区别

3. 浏览器默认字体大小是16px，行间距 是1.5倍行间距，段落 margin-top：0 和margin-bottom:1rem 

    <p>default font siz 16px by default</p>
    <p>default line-hight 1.5</p>
    <p>all p elecment have a margin-top:0 and margin-bottom:1rem (16px by default)</p>    

 4. h1,h2,h3,h4,h5,h6

    <h1>I am 2.5rem (40px by default)</h1>
    <h2>I am 2rem (32px by default)</h2>
    <h3>I am 1.75rem (28px by default)</h3>
    <h4>I am 1.5rem (24px by default)</h4>
    <h5>I am 1.25rem (20px by default)</h5>
    <h6>I am 1rem (16px by default)</h6>

    <br> <!--h1,h2,h3,h4,h5,h6-->
    <h1>I am 2.5rem (40px by default)</h1>
    <p class="h1">I am also 2.5rem (40px by default)</p>
    <h3>I am 1.75rem (28px by default)</h3>
    <p class="h3">I am also 1.75rem (28px by default)</p>

5. display-1, display-2, display-3, display-4

    <h1 class="display-1">display-1</h1>
    <h1 class="display-2">display-2</h1>
    <h1 class="display-3">display-3</h1>
    <h1 class="display-4">display-4</h1>
    <p class="display-1">display-1</p>

 6. small

 .small, small {
    font-size: 80%;
    font-weight: 400;}

    <p>normal text<small>small text</small></p>
    <h1>normal text<small>small text</small></h1>
    <h2>normal text<small>small text</small></h2>
    <h3>normal text<small>small text</small></h3>
    <h4>normal text<small>small text</small></h4>
    <h5>normal text<small>small text</small></h5>
    <h6>normal text<small>small text</small></h6>

7. mark code kbd

    <p> I can hightlight with  <mark>marked text</mark></p>
    <p> I can hightlight with  <code>marked text</code></p>
    <p> I can hightlight with <kbd>marked text</kbd></p>

8. other style

    <p class="font-weight-bold">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="font-weight-light">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="font-italic">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="lead">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="text-left">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="text-center">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="text-right">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="small">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="text-uppercase">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="text-capitalize">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>
    <p class="text-lowercase">This is Jamie's bootstrap learning exprience. If you think it helpful, please let him kNow.</p>