博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap 斜体、文本对齐、缩略图、地址、列表等
阅读量:4629 次
发布时间:2019-06-09

本文共 4155 字,大约阅读时间需要 13 分钟。

目录

1、标题
2、页面主体
3、强调
    a、小号文本
    b、着重
    c、斜体
    d、对齐class
    e、强调class
4、缩略语
5、地址
6、列表
    a、无序列表
    b、有序列表
    c、无样式列表
    d、内联列表
    e、描述
    f、水平排列的描述
1、标题
HTML中的所有标题标签,从<h1>到<h6>均可用。另外,还提供了.h1到.h6 class,为的是给inline属性的文本赋予标题的样式。例如:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

在标题内还可以包含<small>标签或.small元素,用来标记副标题。例如:

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

2、页面主体

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

通过添加.lead可以让段落突出显示,例如:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

3、强调

a、小号文本
对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。

你还可以为行内元素赋予.small以代替任何<small>标签,例如:

This line of text is meant to be treated as fine print.

b、着重

通过增加font-weight强调一段文本,例如:

rendered as bold text

c、斜体

用斜体强调一段文本,例如:

rendered as italicized text

注:可选元素

还可以使用HTML5中定义的<b>和<i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。

d、对齐class

通过文本对齐class,可以简单方便的将文字重新对齐,例如:

Left aligned text.

Center aligned text.

Right aligned text.

e、强调class

这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

Etiam porta sem malesuada magna mollis euismod....

Etiam porta sem malesuada magna mollis euismod....

Etiam porta sem malesuada magna mollis euismod....

Etiam porta sem malesuada magna mollis euismod....

Etiam porta sem malesuada magna mollis euismod....

Etiam porta sem malesuada magna mollis euismod....

演示效果:

4、缩略语

如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性,例如:

attr

为缩略语添加.initialism可以将其font-size设置的更小些,例如:

HTML

5、地址

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

Twitter, Inc.
Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

演示效果如下:

6、列表

a、无序列表
顺序无关紧要的一列元素,例如:

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem

b、有序列表

顺序至关重要的一组元素,例如:

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit

c、无样式列表

移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式,例如:

  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem

d、内联列表

通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列,例如:

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

 

e、描述

带有描述的短语列表,例如:

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

f、水平排列的描述

.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样,例如:

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta fel
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodjusto sit amet risus.

转载于:https://www.cnblogs.com/wolfocme110/p/4552214.html

你可能感兴趣的文章
jquery ocupload一键上传文件应用
查看>>
Java并发编程-看懂AQS的前世今生
查看>>
洛谷 [P3480] KAM-Pebbles
查看>>
操作系统任务调度问题
查看>>
day02-python 基础02
查看>>
.net下Ueditor配置(主要讲解上传功能配置)
查看>>
std::string的Copy-on-Write:不如想象中美好
查看>>
KONG -- 配置 service 并添加 key-auth
查看>>
多重继承和有内嵌对象时构造函数调用顺序
查看>>
C#编码规范
查看>>
信号、槽位及布局
查看>>
webpack + vue
查看>>
启动JvisualVM提示"无法检测到本地java应用程序"的解决方案
查看>>
抓包实现脚本编写--手持机
查看>>
PHP+nginx 线上服务研究(一)
查看>>
Python学习教程:超干货—Python3内置模块之json编解码方法小结
查看>>
谷歌浏览器的一个新特点—关于获取iframe的parent对象
查看>>
iOS开发Swift篇—(二)变量和常量
查看>>
Windows底层开发前期学习准备工作
查看>>
【C语言及程序设计】项目1-39-3:反序数
查看>>