首页    技术博客    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

 

 

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


推荐阅读
  • css

    精选适合UI开发的Canvas框架

    本文介绍了多个适用于用户界面设计的Canvas框架，帮助开发者选择最适合的工具。 ... [详细]
  • css

    基于jQuery的用户注册页面表单验证代码分享

    本文介绍了一段使用jQuery实现的用户注册页面表单验证代码，适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript，确保用户输入的数据格式正确。 ... [详细]
  • css

    Linux 系统启动故障排除指南：MBR 和 GRUB 问题

    Linux 系统启动故障排除指南：MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • css

    导航栏样式练习：项目实例解析

    导航栏样式练习：项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏，包括HTML、CSS和JavaScript代码的实现，并附有详细的说明和效果图。 ... [详细]
  • css

    新浪笔试题

    1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • css

    深入理解Tornado模板系统

    深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ... [详细]
  • css

    深入理解Cookie与Session会话管理

    深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]
  • css

    Xcode 中多行代码缩进技巧

    本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]
  • css

    Python爬虫实战：豆瓣电影Top250数据抓取

    本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]
  • css

    Linux 自动化安装脚本详解

    本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • css

    分页插件3指定到某一页

    前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]
  • css

    深入理解CSS盒模型与box-sizing属性

    本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • css

    在Linux系统中配置并启动ActiveMQ

    在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]
  • css

    使用Windows批处理脚本监控并重启Java应用程序

    本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序，确保其持续稳定运行。脚本每30分钟检查一次，并在需要时重启Java程序。同时，它会将任务结果发送到Redis。 ... [详细]
  • bootstrap

    精选15款免费扁平化界面设计资源

    精选15款免费扁平化界面设计资源
    高质量的网页和移动元素是任何Web或移动项目的基础。优秀的UI设计组件不仅能够提升用户体验，还能显著缩短设计师的工作时间，帮助他们快速创建出引人注目的作品。本文将分享一系列免费的扁平化设计素材。 ... [详细]
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社区 版权所有