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

最新推荐文章于 2022-08-06 08:26:43 发布

cii1929

最新推荐文章于 2022-08-06 08:26:43 发布

阅读量374

点赞数

原文链接：https://my.oschina.net/u/3627873/blog/1506307

版权

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

1，h1到h6标题标签，在HTML中可使用，还提供了.h1到.h6类（标签中加class），为了给内联属性的文本设置一些样式

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

3，“.lead”：让段落突出显示，就是字体加大了，加粗了。例：<p class="lead">Hello</p>

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

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

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

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

8，<strong>强调一段文本；

9，<em>斜体文本

10，<b>加粗,<i>、<em>斜体在 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> <ahref="mailto:#">first.last@example.com</a> </address>

16,多种引用样式：

　　--直接引用建议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）内，列表将变为默认堆叠排列的布局方式。

实践演示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSSDemo</title>
	<!-- 注释下面这行，下面的h标签内容会靠左，故可知引入了样式 -->
	<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
	    <div>
	        <!-- 标题标签 -->
	        <h1>HelloWorld</h1>
	        <h2>HelloWorld</h2>
	        <h3>HelloWorld</h3>
	        <!-- small:小号文本 -->
	        <h4>HelloWorld<small>欢迎你的到来</small></h4>
	        <!-- 全局元素被直接赋予font-size 设置为 14px，
	             line-height 设置为 1.428，
	             <p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin） -->
	        <p>HelloHelloHelloHelloHelloHelloHello</p>
	        <!-- lead：让段落突出显示，加大加粗字体
	             em: 斜体  b:加粗  i:斜体  u:下划线-->
	        <p class="lead">Hello<u>Hello</u><em>Hello</em>Hello<b>Hello</b>Hello<i>Hello</i></p>
	        <!-- mark:内联文本元素,文字背景是黄色  -->
	        <p>Hello World:欢迎来到<mark>HelloWorld</mark></p>
	        <!-- 类似删除文本 -->
	        <del>您好</del>
	        <!-- 无用文本 -->
	        <s>您好</s>
	        <!-- 插入文本 -->
	        <ins>Hello</ins>
	        <!-- 居左 -->
	        <p class="text-left">您好吗</p>
	        <!-- 居中 -->
	        <p class="text-center">您好吗</p>
	        <!-- 居右 -->
	        <p class="text-right">您好吗</p>
	        <!-- 全部小写 -->
	        <p class="text-lowercase">Hello</p>
	        <!-- 全部大写 -->
	        <p class="text-uppercase">Hello</p>
	        <!-- 首字母大写 -->
	        <p class="text-capitalize">Hello</p>
	        <!-- 地址 -->
	        <address>
	            <!-- strong:强调一段文本 -->
	            <strong>Hello</strong>
	                        北京市，海淀区<br>
	                        上地三街，嘉华大厦：1008
	            <!-- abbr:缩略语,文本下方一条省略横线-->
                <abbr title="phone">P:8888 8888</abbr>
	        </address>
	        <!-- .initialism:首字母缩写 -->
	        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
	        
	        <!-- 无序列表 -->
	        <ul>
	           <li>1</li>
	           <li>2</li>
	           <li>3</li>
	        </ul>
	        <!-- 无样式 -->
	        <ul class="list-unstyled">
	           <li>1</li>
	           <li>2</li>
	           <li>3</li>
	        </ul>
	        <!-- 将所有元素放置同一行 -->
	        <ul class="list-inline">
	           <li>1</li>
	           <li>2</li>
	           <li>3</li>
	        </ul>
	        <!-- 有序列表 -->
	        <ol>
	           <li>1</li>
	           <li>2</li>
	           <li>3</li>
	        </ol>
	        <!-- 无样式 -->
	        <ol class="list-unstyled">
	           <li>1</li>
	           <li>2</li>
	           <li>3</li>
	        </ol>
	        <!-- 将所有元素放置同一行 -->
	        <ol class="list-inline">
	           <li>1</li>
	           <li>2</li>
	           <li>3</li>
	        </ol>
	    </div>
    </div>
</body>
</html>

显示效果：