zoukankan      html  css  js  c++  java
  • Bootstrap--全局CSS样式之排版

    Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式。

    (1)标题

    HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

    代码如下:

    Code

    结果如下:

    1

    其实就是html元素标签的h1-h6.不过,在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

    Code

    2

    (2)页面主体

    Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

    实例

    Code

    3

    (3)中心内容

    通过添加 .lead 类可以让段落突出显示。

    Code

    4

    (4 )内联文本元素

    通过添加 <mark>标签可以为元素添加背景颜色并高亮文本。

    实例:

    Code

    5

    在上面的结果中,world背景颜色变成了#fcf8e3,图片上看不清,大家可以在自己的浏览器中查看下,而且world也被高亮了。

    (5)被删除的文本

    我们要显示某些被删除的文本,可以使用<del>标签。

    实例:

    Code


    6

    (6)无用文本

    对于没有用的文本我们可以使用<s>标签。

    实例:

    Code

    7

    对于这个<s>标签的结果我没有看出来和上面那个<del>标签的结果有什么不同,也许只是表达方式不同吧,有知道有什么不同的大神,请告知。下面的插入文本和带下划线的文本也是。

    (7)插入文本

    额外插入的文本使用 <ins> 标签。

    实例:

    Code

    8

    (8)带下划线的文本

    为文本添加下划线,使用 <u> 标签。

    Code

    9

    (9)对齐

    通过文本对齐类text-*,可以简单方便的将文字重新对齐。

    实例:

    Code


    10

    (10)改变大小写

    通过下面几个类改变文本的大小写。

    Code

    (11)地址

    让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

    Code

    对于其他的排版内容,大家可以查看官方文档。谢谢

  • 相关阅读:
    Facade
    Adapter
    Bridge
    Factory
    Singleton
    Decorator
    Template Method
    设计模式
    寻找最小的k个数
    java并发编程(4)--线程池的使用
  • 原文地址:https://www.cnblogs.com/yuanking/p/4510080.html
Copyright © 2011-2022 走看看