bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

1,h1到h6这里也有定义了

2,全局元素被直接赋予font-size 设置为 14pxline-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)

3,“.lead”:让段落突出显示,就是字体加大了,加粗了。

4,<mark>内联文本元素;文字背景是黄色;

5,<del>删除文本标签;<s>无用文本标签,和del效果类似;

6,<ins>插入文本标签;<u>显示文本带有下划线,和<ins>效果类似;

7,<small>小号文本,是父容器字体的85%,也可以用.small代替;

8,<strong>强调一段文本;

9,<em>斜体文本

10,<b>,<i>在 HTML5 中可以放心使用

11,对齐:

  text-left,text-center, text-right,

  text-justify:、、注意段落与段落之间不能留任何空行

  text-nowrap//禁止文件自动换行

12,改变文件大小写:

text-lowercase:小写

text-uppercase:大写

text-capitalize: 字首大写

13,<abbr>缩略语:<abbr title="attribute">attr</abbr>

14,“.initialism”首字母缩写:<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

15,地址<address>:<address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>

16,多种引用样式:

<blockquote>

  --直接引用建议p标签

  --添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中

<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>

  --.blockquote-reverse类可以让引用呈现内容右对齐的效果

17,列表

  无序列表<ul>:

    .list-unstyled:无样式

    .list-inline:将所有元素放置于同一行

  有序列表<ol>

18,描述:带有描述的短语列表<dl> <dt>...</dt> <dd>...</dd> </dl>

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

19,自动截断:.text-overflow水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

35170
来自专栏zaking's

CSS(CSS3)选择器(2)

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ ...

32560
来自专栏闻道于事

JavaScript对象之document对象

DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM ...

30870
来自专栏Flutter入门到实战

10分钟学会ikvStockChart制作K线图(股票走势图)

OK,Show me your code!Go!Go!Go! 先来看一波效果图:

1K20
来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

20950
来自专栏向治洪

微信小程序基本组件概述

为了更好的理解微信小程序,本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/co...

219100
来自专栏闻道于事

JavaScript事件与例子(三)

两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

29460
来自专栏落花落雨不落叶

简单轮播图实现

342100
来自专栏天天

面向对象编程(随机点名)

17320
来自专栏Golang语言社区

Golang的iota问题

通常人们认为iota就是0,其实并非如此。 确切的说,当iota在紧跟着关键字const的第一行出现时,iota为0,在第二行出现时,iota为1,以此类推;当...

402110

扫码关注云+社区

领取腾讯云代金券