热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Bootstrap全局CSS样式之排版

Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式。(1)标题HTML中的所有标题标签,<h1>到<h6>均可使用。另外,还提供了.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式

Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式。

(1)标题

HTML 中的所有标题标签,

均可使用。另外,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

代码如下:

Code

        

h1

h2

h3

h4

h5
h6

结果如下:

 

Bootstrap--全局CSS样式之排版

其实就是html元素标签的h1-h6.不过,在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。

Code

        

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

 

 

Bootstrap--全局CSS样式之排版

 

(2)页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外,

(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

 

实例

Code

        

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

 

 

Bootstrap--全局CSS样式之排版

 

(3)中心内容

通过添加 .lead 类可以让段落突出显示。

Code

        
class="lead"> Welcome to our world

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

 

 

Bootstrap--全局CSS样式之排版

(4 )内联文本元素

通过添加 标签可以为元素添加背景颜色并高亮文本。

实例:

Code

        
class="lead"> Welcome to our world

 

 

Bootstrap--全局CSS样式之排版

在上面的结果中,world背景颜色变成了#fcf8e3,图片上看不清,大家可以在自己的浏览器中查看下,而且world也被高亮了。

(5)被删除的文本

我们要显示某些被删除的文本,可以使用标签。

实例:

Code

        
class="lead"> Welcome to our world

hello everybody this is delete


Bootstrap--全局CSS样式之排版

 

 

 

(6)无用文本

对于没有用的文本我们可以使用标签。

实例:

Code

        
class="lead"> Welcome to our world

hello everybody this is delete

This line of text is meant to be treated as no longer accurate.

 

 

Bootstrap--全局CSS样式之排版

对于这个标签的结果我没有看出来和上面那个标签的结果有什么不同,也许只是表达方式不同吧,有知道有什么不同的大神,请告知。下面的插入文本和带下划线的文本也是。

(7)插入文本

额外插入的文本使用 标签。

实例:

Code

        Welcome to our world
    

 

 

Bootstrap--全局CSS样式之排版

 

(8)带下划线的文本

为文本添加下划线,使用 标签。

Code

      Welcome to our world
        
Welcome to our world

 

 

Bootstrap--全局CSS样式之排版

(9)对齐

通过文本对齐类text-*,可以简单方便的将文字重新对齐。

实例:

Code

        

class="text-left">Left aligned text.

class="text-center">Center aligned text.

class="text-right">Right aligned text.

class="text-justify">Justified text.

class="text-nowrap">No wrap text.


Bootstrap--全局CSS样式之排版

 

 

(10)改变大小写

通过下面几个类改变文本的大小写。

Code

        

class="text-lowercase">Lowercased text.

class="text-uppercase">Uppercased text.

class="text-capitalize">Capitalized text.

 

 

(11)地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。

Code
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

 

 

对于其他的排版内容,大家可以查看官方文档。谢谢


推荐阅读
  • 本文介绍如何通过参数化查询来防止SQL注入攻击,确保数据库的安全性。示例代码展示了在C#中使用参数化查询添加学生信息的方法。 ... [详细]
  • AngularJS 控制器详解
    本文通过一个示例详细介绍了 AngularJS 控制器的使用方法,并探讨了控制器之间数据共享的问题。 ... [详细]
  • c#  项目文件,C#viual studio使用方法
    一、项目文件1)Properties节点下主要存放的是当前程序集相关的信息,如版本号、标题等。双击”Properties“,打开如下项目属 ... [详细]
  • 高清视频与数据综合采集设备控制板成功案例解析
    本文介绍了一款高性能的高清视频与数据综合采集设备控制板的成功方案,详细阐述了其核心特性和应用场景。 ... [详细]
  • Vulnhub DC3 实战记录与分析
    本文记录了在 Vulnhub DC3 靶机上的渗透测试过程,包括漏洞利用、内核提权等关键步骤,并总结了实战经验和教训。 ... [详细]
  • 2019-2020学年 20174325 叶竞蔚 《网络对抗技术》实验六:Metasploit基础应用
    本实验旨在掌握Metasploit框架的基本应用方法,重点学习三种常见的攻击方式及其实施思路。实验内容包括一次主动攻击(如MS08-067)、一次针对浏览器的攻击(如MS11-050)以及一次针对客户端的攻击(如Adobe漏洞利用)。此外,还包括成功应用一个辅助模块。 ... [详细]
  • HPE OEM Brocade 300 交换机无中断固件升级指南
    本文详细介绍了如何通过FTP方式对HPE OEM Brocade 300交换机进行无中断固件升级,确保网络服务的连续性。 ... [详细]
  • Android 属性 allowBackup 的安全风险分析
    在 Android API Level 8 及以上版本中,系统提供了一种机制来备份和恢复应用程序数据。通过设置 allowBackup 属性,开发者可以控制是否允许这种备份和恢复功能。然而,这一功能也带来了潜在的安全风险。 ... [详细]
  • 列表生成式虽然简洁高效,但在处理复杂算法时存在局限性。本文将介绍生成器(generator)的概念及其优势,探讨如何通过生成器解决列表生成式的局限性,并提供实际示例。 ... [详细]
  • Ubuntu 环境下配置 LAMP 服务器
    本文详细介绍了如何在 Ubuntu 系统上安装和配置 LAMP(Linux、Apache、MySQL 和 PHP)服务器。包括 Apache 的安装、PHP 的配置以及 MySQL 数据库的设置,确保读者能够顺利搭建完整的 Web 开发环境。 ... [详细]
  • 本文介绍了编程语言的基本分类,包括机器语言、汇编语言和高级语言的特点及其优缺点。随后详细讲解了Python解释器的安装与配置方法,并探讨了Python变量的定义、使用及内存管理机制。 ... [详细]
  • 在开发板的启动选项中看到如下两行:7:LoadBootLoadercodethenwritetoFlashviaSerial.9:LoadBootLoadercodethenwri ... [详细]
  • 本文介绍了如何使用 Gesture Detector 和 overridePendingTransition 方法来实现滑动界面和过渡动画。 ... [详细]
  • 本文描述了在使用Bootstrap时遇到的一个常见问题:页面显示为空白。通过详细分析和解决方法,帮助开发者快速定位并解决问题。 ... [详细]
  • 驱动程序的基本结构1、Windows驱动程序中重要的数据结构1.1、驱动对象(DRIVER_OBJECT)每个驱动程序会有唯一的驱动对象与之对应,并且这个驱动对象是在驱 ... [详细]
author-avatar
手机用户2602927383
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有