zoukankan      html  css  js  c++  java
  • Bootstrap_排版_文字样式

    一、段落

      段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):

    1、全局文本字号为14px(font-size)

    2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。

    3、颜色为深灰色(#333)

    二、文字样式

      在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

    如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。

    1.粗体

      在Bootstrap中,可以使用<b><strong>标签让文本直接加粗。

    2.斜体

      在Bootstrap中,可以使用<em><i>来实现文本斜体。

    三、强调类

    • .text-muted:提示,使用浅灰色(#999)
    • .text-primary:主要,使用蓝色(#428bca)
    • .text-success:成功,使用浅绿色(#3c763d)
    • .text-info:通知信息,使用浅蓝色(#31708f)
    • .text-warning:警告,使用黄色(#8a6d3b)
    • .text-danger:危险,使用褐色(#a94442)
    <div class="text-muted">.text-muted 效果</div>
    <div class="text-primary">.text-primary效果</div>
    <div class="text-success">.text-success效果</div>
    <div class="text-info">.text-info效果</div>
    <div class="text-warning">.text-warning效果</div>
    <div class="text-danger">.text-danger效果</div>

    效果如下:

    四、文本对齐

      在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:

      ☑  左对齐,取值left

      ☑  居中对齐,取值center

      ☑  右对齐,取值right

      ☑  两端对齐,取值justify

      为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格:

      ☑   .text-left:左对齐

      ☑   .text-center:居中对齐

      ☑   .text-right:右对齐

      ☑   .text-justify:两端对齐

  • 相关阅读:
    计算机网络基础 汇总
    指针与数组
    卡特兰数
    Leetcode Sort Colors
    Leetcode Group Shifted Strings
    Leetcode Summary Ranges
    Leetcode Count Primes
    Leetcode Reverse Words in a String II
    Leetcode Reverse Words in a String
    Leetcode Rotate Array
  • 原文地址:https://www.cnblogs.com/Ryan344453696/p/4987037.html
Copyright © 2011-2022 走看看