Bootstrap 排版样式

最新推荐文章于 2024-05-17 17:36:00 发布
最新推荐文章于 2024-05-17 17:36:00 发布
阅读量4.5k 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/conatic/article/details/64500470
版权

页面排版

1.页面主体

Bootstrap将全局：

  • font-size 设置为14px;
  • line-height 设置为1.428（20px）;
  • p标签 设置为1/2行高（10px）;

创建包含段落突出的文本：
添加 class=”lead”，得到更大更粗、行高更高的文本。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body>
        <p>Bootstrap</p>
        <!--添加class = "lead"-->
        <p class="lead">Bootstrap</p>
        <p>Bootstrap</p>
        <p>Bootstrap</p>
    </body>
</html>

运行结果：
这里写图片描述

2.标题

Bootstrap 定义了所有的 HTML 标题（h1 到 h6）的样式,i可以嵌入一个small元素作为副标题。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
        <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
        <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
        <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
        <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
        <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
    </body>
</html>

运行结果：
这里写图片描述

3.内联文本元素

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--添加标记-->
        <p><mark>标记1</mark></p>
        <p class="mark">标记2</p>
        <!--加线条的文本-->
        <del> Boostrap del; </del>
        <s> Bootstrap s; </s>
        <ins> Bootstrap ins; </ins>
        <!--强调-->
        <br />
        <small>small 标准字号的85%; </small>
        <strong> 加粗 700; </strong>
        <em> em 设置为斜体 ;</em>
    </body>
</html>

运行结果：
这里写图片描述

4.对齐

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>
    </body>
</html>

运行结果：
这里写图片描述

5.大小写及缩写

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--设置英文大小写-->
        <p class="text-lowercase">Bootstrap 小写;</p>
        <p class="text-uppercase">Bootstrap 大写;</p>
        <!--设置单词首字母大写-->
        <p class="text-capitalize">bootstrap 大写;</p>
        <!--设置缩写-->
        <abbr title="World Wide Web">WWW</abbr><br>
        <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
    </body>
</html>

运行结果：

这里写图片描述

6.地址address

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--去掉了倾斜，设置了行高，底部20px-->
        <address>
            <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br>
            <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>
    </body>
</html>

运行结果：
这里写图片描述

7.引用文本

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--默认：增加了边线，设定了字体大小和内外边距-->
        <blockquote>默认Bootstrap 引用</blockquote>
        <!--反向引用-->
        <blockquote class="blockquote-reverse">反向引用</blockquote>
    </body>
</html>

运行结果：
这里写图片描述

8.列表排版

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 列表</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
        <!--有序列表和无序列表-->
        <ol>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ol>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <!--移出默认样式-->
        <ul class="list-unstyled">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <!--设置成内联-->
        <ul class="list-inline">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <!--定义列表-->
        <dl>
            <dt>描述1</dt>
            <dd>列表1</dd>
            <dt>描述2</dt>
            <dd>列表2</dd>
        </dl>
        <!--水平排列定义列表-->
        <dl class="dl-horizontal">
            <dt>Description 1</dt>
            <dd>Item 1</dd>
            <dt>Description 2</dt>
            <dd>Item 2</dd>
        </dl>
    </body>
</html>

运行结果：
这里写图片描述

9.代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--内联代码--> 
        <code>&lt;section&gt;</code>
        <!--用户输入-->
        press <kbd>ctrl +</kbd>
        <!--代码块-->
        <pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>
    </body>
</html>

运行结果：

这里写图片描述

flowser
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap表单布局
weixin_44535029的博客
11-03 1267
Bootstrap表单布局
bootstrap排版样式
涂涂
07-18 529
学习笔记 1.页面主体 Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即 20px)；段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。 //创建包含段落突出的文本 Bootstrap 框架 Bootstrap 框架 支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。即span也具有了
BootStrap入门到实战：BootStrap全局CSS样式（二）- 文本排版和样式设置、 HTML5特殊文本标签的应用
最新发布
林林一928的博客
05-17 966
在使用Bootstrap框架时，可以通过结合使用这些HTML标签和Bootstrap的样式类，来增强页面的视觉效果和用户体验。例如，可以使用Bootstrap的排版和颜色类与这些标签结合，以创建更吸引人的代码示例、用户输入提示、代码块展示等。该内容并不直接属于Bootstrap框架的具体内容，而是HTML5中的一些标签元素，它们用于表示特定类型的文本内容，如代码、键盘输入、预格式化文本等。内容涵盖了标题、副标题、文本对齐、大小写转换、文本修饰以及缩略语等方面的样式设置。通过这几个类可以改变文本的大小写。
bootStrap表单布局
aqzengkuasheng的博客
02-20 724
表单布局先要用form标签 <form action="#" class="form-horizontal" role="form"> </form> 然后用.form-group 类，在这里面去写每一个表单元素。在每一个表单的开头，可以利用label标签去说明这个模块是干什么的。其中for属性和这个表单元素的id属性一样，可以以此聚焦。 表单布局 水平样式 设置样式： form-horizontal 内联表单 设置样式： form-
Bootstrap img
qq_37538698的博客
04-10 452
.img-rounded为图片添加圆角 (IE8 不支持)尝试一下.img-circle将图片变为圆形 (IE8 不支持)尝试一下.img-thumbnail缩略图功能尝试一下.img-responsive图片响应式 (将很好地扩展到父元素)...
Bootstrap3.0学习第四轮(排版)
专注IT
08-25 480
Bootstrap3.0学习第四轮(排版) 前言 阅读之前您也可以到系列列表中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本次主要来了解的是排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单，为了保证系列的完整性，也顺带复习下，还是记录一下。主要内容如下： 1.标题 2.页面主体 3.强调 4.缩略语 5.地
学习使用Bootstrap页面排版样式
08-30
"学习使用Bootstrap页面排版样式" Bootstrap 是一个基于 HTML、CSS、JavaScript 的开源框架，由 Twitter 公司的两名技术工程师研发的。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 ...
全面解析Bootstrap排版使用方法（文字样式）
09-03
在Bootstrap中，排版是设计的基础，而文字样式则是排版中不可或缺的一部分。本文将详细介绍如何在Bootstrap中设置和使用文字样式。 首先，Bootstrap对全局的文本样式进行了统一设定。默认情况下，段落的字号设定为...
第二章之Bootstrap 页面排版样式
10-22
内联文本元素也是Bootstrap排版中的重要部分。例如，`<mark>`元素或`.mark`类可以用来高亮文本，`<del>`和`s`用于表示删除的文本，`<ins>`表示插入的文本，`<u>`则用于下划线。此外，`<small>`提供了一个较小的字体...
第五篇Bootstrap 排版
09-02
在Bootstrap中，排版涉及到各种元素的样式调整，包括标题、段落、列表以及内联元素等。以下是对这些排版特性的详细介绍： 1. **标题(Headers)** Bootstrap支持HTML标准的六级标题`<h1>`到`<h6>`。每级标题的字号...
BootStrap4内容系列之图像排版
爱喝水的qdy的博客
12-01 3168
目录官方地址其他文档地址响应式图片图片等比例缩放缩略图对齐整体代码 官方地址 https://getbootstrap.com/docs/4.4/content/images/ 其他文档地址 菜鸟教程 https://www.runoob.com/bootstrap4/bootstrap4-images.html http://bs4.vx.link http://bs4.vx.link...
BootStrap完整版的中文开发文档（.chm格式）
10-20
完整版的bootstrap中文开发文档（.chm格式的）， 我就是用这个，讲解特别清楚，非常好用
Bootstrap CSS(图片，表格，文字排版，颜色)
weixin_45921263的博客
07-11 833
文章目录前言一、偏移列（补充）1.概念：2.代码示例：二、图片1.``类：2.代码如下（示例）：三、文字排版1.代码如下（示例）：四、表格1.表格类，`和类`2.代码如下（示例）：五、颜色1.代码如下（示例）： 前言 本篇文章主要是对Bootstrap CSS进行相应的总结，其中常用的就是图片、表格、文字排版、颜色等一些内容。同时对上篇文章缺失的的内容（偏移列）进行补充。 一、偏移列（补充） 1.概念： 偏移是一个用于更专业的布局的有用功能。它们可以用来给列腾出更多的空间。为了在大屏幕显示器上使用偏移，
Bootstrap 排版
歪脖先生的博客
03-10 338
排版Bootstrap提供了个排版组件：Hero unit 和 Page header。Hero unit 是一个轻量级的可扩展组件，主要用于展示网站的重点内容。Page header 用于简单地为页面的头部设置一个独立的空间。Hero unitHero unit是一个轻量、灵活组件，用于展示网站的重点内容，它的标题会被加大显示，而且边距也比较大，非常适合营销类或内容类网站。要在页面中放置一个He...
Bootstrap备忘：排版&表单
helloworld
05-26 555
Bootstrap常用排版及表单格式，用于个人备忘： 副标题 <h1>Bootstrap标题一<small>我是副标题</small></h1> 段落 <p> 我是一个段落，你猜我在Bootstrap是以什么样的风格显示。 </p> 强调内容：class=“lead” <p class="lead...
bootstrap表单双排_第七篇Bootstrap表单布局实例代码详解(三种表单布局)
weixin_39695323的博客
12-19 166
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。下面逐一给大家介绍，有兴趣的朋友一起学习吧。创建垂直或基本表单：•·向父 元素添加 role="form"。•·把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。•·向所有的文本元素 、 和 添加 class .form-control名称placeholder="请输入名称"&...
Bootstrap 框架-排版
moduzhang的博客
08-09 1234
概述 GitHub上这样介绍 bootstrap： 简单灵活可用于架构流行的用户界面和交互接口的 html、css、javascript 工具集。 基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 自定义 JQuery 插件，完整的类库，基于 Less 等。 https://getbootstra...
Bootstrap学习--基本格式
01-29 106
以下为Bootstrap的基本格式代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m...
bootstrap专栏 03.图文处理 02.图文排版
Web Python
03-17 307
# 02.图文排版 [toc]{type: "ol", level: [3,4]} ### 代码排版 - pre-scrollable > 添加滚动条 - code > 代码区域 - var > 字体倾斜 - kbd > 键盘标识 ```html <pre class="pre-scrollable" style="width: 600px; height: 200px"> <code> def func1(x,y){...
bootstrap排版左对齐
10-20
Bootstrap是一个流行的前端框架，它提供了许多用于构建网站和应用程序的组件和工具。其中之一是导航栏（Navbar）组件，它可以用于创建网站的顶部导航栏。在Bootstrap中，导航栏默认是左对齐的，也就是说，导航栏中的所有项目都靠左对齐。如果你想要将导航栏中的项目左、中、右对齐，可以使用一些CSS样式来实现。具体的实现方法可以参考上述提供的引用内容中的相关链接。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值