文档章节

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

wbin-v
 wbin-v
发布于 2017/08/11 09:48
字数 1041
阅读 4
收藏 0

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

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

2,全局元素被直接赋予font-size 设置为 14pxline-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,多种引用样式:

  <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)内,列表将变为默认堆叠排列的布局方式。

实践演示:

<!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>

显示效果:

© 著作权归作者所有

上一篇: Bootstrap CSS表格
wbin-v
粉丝 3
博文 13
码字总数 18527
作品 0
私信 提问
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
199
0
Bootstrap中的段落和强调内容

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1、全局文本字号为14px(font-size)。 2、行高为1.42857143(line-height)...

9秒教育
2015/12/04
131
0
Bootstrap响应式前端框架笔记二——排版标签与类

Bootstrap响应式前端框架笔记二——排版标签与类 Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行...

珲少
2016/12/03
60
0
Bootstrap 排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了...

wybo521
2016/01/25
7
0
Bootstrap学习笔记(三)

13.缩略图 :圆角的外边框 标题字幕样式 image.png 13.导航 :标签页基类(ul加) 普通标签页,胶囊式标签页,纵向(ul加) 标签呈现出同等宽度(ul加) 显示的是哪个标签页内容(li加) image....

Mr_欢先生
2017/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Tedis:基于 TiKV 构建的 NoSQL 数据库

作者介绍: 陈东明,饿了么北京技术中心架构组负责人,负责饿了么的产品线架构设计以及饿了么基础架构研发工作。曾任百度架构师,负责百度即时通讯产品的架构设计。具有丰富的大规模系统构 ...

TiDB
27分钟前
0
0
linux命令

ls命令是linux下最常用的命令。ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单。如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单。 通过ls 命令不仅可以查看linux文件...

WinkJie
35分钟前
0
0
你需要的物流运输类报表,这里都有

你需要的物流运输类报表,都在这里 葡萄城报表模板库是一款免费的报表制作、学习和参考工具,包含了超过 200 张高质量报表模板,涵盖了 16 大行业和 50 多种报表类型,为 30 余万报表开发者提...

葡萄城技术团队
42分钟前
2
0
像Java SE一样编写Java EE(ddd探索)

今天主要改写昨天的组合模式成Web系统。 容器接口为 public interface TreeProduct { /** * 展示所有产品 * @return */ List<TreeProduct> allProducts();...

算法之名
43分钟前
0
0
Django Model 模型建立

Django Model 模型 Django Model层是Django的数据模型层,每一个Model类就是数据库中的一张表; 我们需要注意下面几点: model一般都是定义在不同的APP的models.py模块文件中,可以是一个,也...

彩色泡泡糖
51分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部