首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Bootstrap全局CSS样式之排版

作者：手机用户2602927383 | 来源：互联网 | 2023-05-18 19:04
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 设置为 14px，line-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

 

 

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


推荐阅读
  • ajax

    Java实战之电影在线观看系统的实现

    Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • html

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • html

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • html

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • html

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • html

    测试人的性格，点火让他着急，考验婚姻问题的善意玩人

    本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • html

    Linux进程控制块PCBtask_struct结构体结构及作用详解

    本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • html

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • html

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • layout

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
  • html

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • html

    ABAP开发发送邮件程序的配置和代码整理

    本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
  • html

    动态规划算法的基本步骤及最长递增子序列问题详解

    动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]
  • html

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • html

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
author-avatar
手机用户2602927383
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有