Bootstrap 斜体、文本对齐、缩略图、地址、列表等
目录
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>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3>
在标题内还可以包含<small>标签或.small元素,用来标记副标题。例如:
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
2、页面主体
Bootstrap将全局font-size设置为14px,line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px),例如:
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
通过添加.lead可以让段落突出显示,例如:
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
3、强调
a、小号文本
对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何<small>标签,例如:
<small>This line of text is meant to be treated as fine print.</small>
b、着重
通过增加font-weight强调一段文本,例如:
<strong>rendered as bold text</strong>
c、斜体
用斜体强调一段文本,例如:
<em>rendered as italicized text</em>
注:可选元素
还可以使用HTML5中定义的<b>和<i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。
d、对齐class
通过文本对齐class,可以简单方便的将文字重新对齐,例如:
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
e、强调class
这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。
<p class="text-muted">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-primary">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-success">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-info">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod....</p> <p class="text-danger">Etiam porta sem malesuada magna mollis euismod....</p>
演示效果:
4、缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性,例如:
<abbr title="attribute">attr</abbr>
为缩略语添加.initialism可以将其font-size设置的更小些,例如:
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
5、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式,例如:
<address><strong>Twitter, Inc.</strong><br>795 Folsom Ave, Suite 600<br>San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> (123) 456-7890 </address><address><strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a> </address>
演示效果如下:
6、列表
a、无序列表
顺序无关紧要的一列元素,例如:
<ul><li>Lorem ipsum dolor sit amet</li><li>Nulla volutpat aliquam velit<ul><li>Phasellus iaculis neque</li><li>Purus sodales ultricies</li></ul></li><li>Faucibus porta lacus fringilla vel</li><li>Eget porttitor lorem</li></ul>
b、有序列表
顺序至关重要的一组元素,例如:
<ol><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Integer molestie lorem at massa</li><li>Facilisis in pretium nisl aliquet</li><li>Nulla volutpat aliquam velit</li></ol>
c、无样式列表
移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式,例如:
<ul class="list-unstyled"> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit<ul><li>Vestibulum laoreet porttitor sem</li><li>Ac tristique libero volutpat at</li></ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Eget porttitor lorem</li> </ul>
d、内联列表
通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列,例如:
<ul class="list-inline"><li>Lorem ipsum</li><li>Phasellus iaculis</li><li>Nulla volutpat</li> </ul>
e、描述
带有描述的短语列表,例如:
<dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
f、水平排列的描述
.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样,例如:
<dl class="dl-horizontal"><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta fel</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd><dt>Felis euismod semper eget lacinia</dt><dd>Fusce dapibus, tellus ac cursus commodjusto sit amet risus.</dd> </dl>
如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】。
如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】。
如果,您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是【Ruthless】。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
转载于:https://www.cnblogs.com/linjiqin/p/3564908.html
Bootstrap 斜体、文本对齐、缩略图、地址、列表等相关推荐
- Bootstrap——制作个人简历网页、工具类【边框(添加、删除、颜色、圆角)、清除浮动、颜色(文本、链接、背景)、display属性、浮动、定位、文本对齐】
制作个人简历网页 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
- latex表格内容上下居中_LaTeX表格紧跟文字 (不影响下方文本对齐)
Latex 表格内文字过长自动换行 法一: [plain] view plaincopy \begin{tabular}{m{5cm}} 法二: [plain] view plaincopy \beg ...
- Python使用标准库zipfile+re提取docx文档中超链接文本和链接地址
推荐教材: <Python程序设计实用教程>,ISBN:978-7-5635-6065-3,董付国,北京邮电大学出版社 教材封面: 全国各地新华书店有售 京东购买链接: 配套资源:教学大纲 ...
- 表格内部的文本对齐类
本文翻译自:Text-align class for inside a table Is there a set of classes in Twitter's Bootstrap framework ...
- Exchange2010应用地址列表
应用地址列表 这是预发行版文档,在未来发行版中可能有所更改. [本主题的当前状态是:内容完成.] 适用于:Exchange Server 2010 SP1 上一次修改主题:2009-08-25 地址列 ...
- Align and Prompt:SalesforceANU提出ALPRO,进行细粒度的视频文本对齐!代码已开源!...
关注公众号,发现CV技术之美 本文分享论文『Align and Prompt: Video-and-Language Pre-training with Entity Prompts』,由 Sales ...
- 不同公式等号对齐_数学公式编辑器“制作amp;套用公式模板”和“文本对齐问题”的完美解决方案...
微信公众号"中学数学教与学"教师群公告 公式编辑器中制作.套用公式模板方法以及文本对齐问题解决方法 本文主要内容: 一.公式.文字不再同一行上 解决方法一: 优点:操作简单 ...
- 定义斜体文本的html标签,HTML 文本格式化
全屏 HTML 文本格式化 HTML 文本格式化html> 速学堂(openketang.com) 加粗文本 斜体文本 电脑自动输出 这是 下标 和 上标 运行结果加粗文本 斜体文本 电脑自 ...
- WEB安全之DIV CSS基础(二):文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性 文字属性 文本属性 列表样式和伪类超链接 项目符号列举 设置列表项标记 超链接 文字和文本的属性 文字 ...
最新文章
- 关于程序中数据库报错“父项未找到”
- final,finally,finalize的区别
- hdoj Last non-zero Digit in N! 【数论】
- java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceE解决方法
- python处理行情数据_请教 Python 如何解析 DBF 文件, SJSHQ.dbf 上交所行情文件,数据来源于巨灵数据。...
- 第一个,net core项目,.net core入门介绍来了
- linux 命令行看图片,骚操作:用终端打开图片
- PrestaShop物流跟踪模块
- 小米9首次官方降价:2799元,依旧实力强劲
- hadoop 依赖式job_每天一学:一个轻量级分布式任务调度框架 XXL-JOB
- 苹果说:没错,我就是故意让旧 iPhone 变慢的!
- 并发编程(1): volatile、原子变量、自旋锁和互斥锁
- 莫比乌斯反演(bzoj 2301: [HAOI2011]Problem b)
- 在EXCEL中使用SQL语言对工作表进行操作
- 基于Java的学生信息管理系统
- matlab中linspace函数
- 华为2020秋招笔试试题
- 干货分享!一份你不知道的武汉Web前端开发学习攻略
- 阿里云物联网平台测评:以温度报警器开发为例
- Linux7安装keepalive,keepalive配置文件详解
热门文章
- python init方法是不是私有方法_为什么Python的“私有”方法实际上不是私有的?...
- java length()函数_小猿圈介绍java函数式编码结构及优势
- 深度解析|基于 eBPF 的 Kubernetes 一站式可观测性系统
- 亲历者说 | 完整记录一年多考拉海购的云原生之路
- dump文件分析工具_使用这个 Python 工具分析你的 Web 服务器日志文件 | Linux 中国...
- 台式电脑不拉网线上网_在家里想不拉宽带用无线上网,试试这几招?
- memset 结构体内指针_SideTable结构
- C:#define用法
- yolov配置之:cuda、 cudnn安装
- 图像传感器与信号处理——自动曝光算法