你精通吗

2020-01-06 作者:亚洲城动态   |   浏览(125)

在上篇文章给大家介绍了BootStrap3学习笔记之网格系统

有了Bootstrap前端框架预处理好的排版类,我们从此不必再为每个排版的标签元素写大量的CSS代码了,可以使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素预定义好的样式,排版出很规范的网页。

对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记

那我们接下来一起学习下,bootstrap前端框架到底为我们预定义了那些排版的类呢?

h1. Bootstrap heading Secondary texth2. Bootstrap heading Secondary texth3. Bootstrap heading Secondary texth4. Bootstrap heading Secondary texth5. Bootstrap heading Secondary texth6. Bootstrap heading Secondary text

第一:Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈,这些字体都是目前所有网页最经常用的字体了。从此我们不必再为body定义全局样式的字体样式了。只要用了Bootstrap前端框架font-family默认使用了上面的字体系列了。即:font-family:sans-serif;我们来验证下吧,打开bootstrap前端的框架CSS文件bootstrap.css

如果页面中有一个需要与众不同的h1,则可以将其包含在样式为“page-header的div中。

各位小伙伴会想,我们只可以用bootstrap前端框架默认的字体吗?显然不是的,后面我会教你如何定制bootstrap框架,打造我们自己喜欢,想要效果的bootstrap框架。

Twitter Bootstrap An intuitive front-end framework

第二:bootstrap前端框架预定义了h1-h6的CSS样式,我从bootstrap前端的框架CSS文件bootstrap.css中把定义的样式抽取了一部分出来,可以看到分别为hn定义了font-size的属性值。h1 {font-size: 36px;}h2 {font-size: 30px;}h3 {font-size: 24px;}h4 {font-size: 18px;}h5 {font-size: 14px;}h6 {font-size: 12px;}实际效果如下:网页代码:

Bootstrap默认字体大小为14px,行高1.428,段落间距10px,如果某个段落需要醒目一点,可是有'lead'类使用text-*类,可以很方便的设定文本的水平对齐方式

第三:内联子标题,如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 ,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示:

Left aligned text.Center aligned text.Right aligned text.Justified text.No wrap text.

第四:引导主体副本,为了给段落添加强调文本,则可以添加 class=”lead”,这将得到更大更粗、行高更高的文本,如下面实例所示:

HTML中的文字格式标记在Bootstrap中都可以使用

以下bootstrap前端框架类不再举例,我只写出用途,因为可以跟上面的例子一样去试验小效果。

This is bold textThis is big textThis is computer codeThis is emphasized textThis is italic textThis is highlighted textThis is small textThis is strongly emphasized textThis is subscript and superscriptThis text is inserted to the documentThis text is deleted from the document

第五:强调,HTML 的默认强调标签 、

字母格式转换类可以很好的完成需要的转换:

第六:缩写,HTML元素提供了用于缩写的标记,比如WWW或HTTP。Bootstrap定义元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为title属性添加了文本)。为了得到一个更小字体的文本,请添加.initialism到。

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

第七:地址,使用

颜色是传递内容重要性的有力方式,Bootstrap提供了便利的设定文字强调级别的类:

标签,您可以在网页上显示联系信息。由于

Muted: This text is grayed out.Important: Please read the instructions carefully before proceed.Success: Your message has been sent successfully.Note: You must agree with the terms and conditions to complete the sign up process.Warning: There was a problem with your network connection.Error: An error has been occurred while submitting your data.

默认为display:block;,您需要使用标签来为封闭的地址文本添加换行。

对引用内容也做了修饰:

第八:引用,您可以在任意的HTML文本旁使用默认的

The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.by Albert Einstein

。其他选项包括,添加一个标签来标识引用的来源,使用class.pull-right向右对齐引用。下面的实例演示了这些特性:

第九:列表Bootstrap支持有序列表、无序列表和定义列表。有序列表:有序列表是指以数字或其他有序字符开头的列表。无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用class.list-unstyled来移除样式。您也可以通过使用class.list-inline把所有的列表项放在同一行中。定义列表:在这种类型的列表中,每个列表项可以包含

元素。

代表定义术语,就像字典,这是被定义的属于。接着,

的描述。您可以使用classdl-horizontal把

行中的属于与描述并排显示。其他更多bootstrap前端框架类需要非常精通的如下,大家必须熟记和熟练去使用。

.lead 使段落突出显示.small 设定小文本.text-left 设定文本左对齐.text-center 设定文本居中对齐.text-right 设定文本右对齐.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行.text-nowrap 段落中超出屏幕部分不换行.text-lowercase 设定文本小写.text-uppercase 设定文本大写.text-capitalize设定单词首字母大写.initialism 显示在元素中的文本以小号字体展示.blockquote-reverse设定引用右对齐.list-unstyled 移除默认的列表样式,列表项中左对齐。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式).list-inline 将所有列表项放置同一行.dl-horizontal 该类设置了浮动和偏移,应用于

元素和

元素中,具体实现可以查看实例.pre-scrollable 使

元素可滚动scrollable

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

其中的类是为了右对齐引用。

以上所述是小编给大家介绍的Bootstrap3学习笔记之排版的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文由yzc216亚洲城发布于亚洲城动态,转载请注明出处:你精通吗

关键词: 亚洲城官网 yzc216亚洲城