bootstrap4

最新推荐文章于 2023-09-13 20:22:08 发布
最新推荐文章于 2023-09-13 20:22:08 发布
阅读量168 收藏 1
点赞数
分类专栏： bootstrap4 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cclym/article/details/120025701
版权
本文详细介绍了Bootstrap4的网格系统，包括不同屏幕尺寸下的响应式布局。此外，还涵盖了文字排版，如标题、显示标题、副标题和文本样式。接着展示了偏移列、表格、图像形状、信息提示框、徽章、按钮等组件的使用方法，以及各种颜色和背景的应用。这些内容有助于理解并运用Bootstrap4创建响应式且美观的网页布局。
摘要由CSDN通过智能技术生成

bootstrap4

  • 网格系统
    bootstrap 提供一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列

  • 系统网格
    网格系统有5类
    .col- 针对所有设备
    .col-sm- 平板-屏幕宽度等于大于576px
    .col-md- 桌面显示器-屏幕宽度等于大于768px
    .col-lg- 大桌面显示器 - 屏幕宽度等于大于992px
    .col-xl- 超大桌面显示器-屏幕宽度等于大于1200px

<body>
    <div class="container">
        <div class="row">
            <div class="col-1">1</div>
            <div class="col-1">2</div>
            <div class="col-1">3</div>
            <div class="col-1">4</div>
            <div class="col-1">5</div>
            <div class="col-1">6</div>
            <div class="col-1">7</div>
            <div class="col-1">8</div>
            <div class="col-1">9</div>
            <div class="col-1">10</div>
            <div class="col-1">11</div>
            <div class="col-1">12</div>

        </div>

    </div>
</body>
  • 偏移列
<style>
        .row>div{ 
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div> 
            <div class="col-md-3 offset-md-3"></div> 
        </div>

    </div>

在这里插入图片描述

  • 文字排版
 <div class="container">
        <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
        <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
        <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
        <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
        <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
        <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>

    </div>

在这里插入图片描述

<div class="container">
        <h1>Display 标题</h1>
        <p>Display 标题可以输出更大更粗的字体样式。</p>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
    </div>

在这里插入图片描述

  <div class="container">
        <h1>更小文本标题</h1>
        <p>small 元素用于字号更小的颜色更浅的文本:</p>
        <h1>h1 标题 <small>副标题</small></h1>
        <h2>h2 标题 <small>副标题</small></h2>
        <h3>h3 标题 <small>副标题</small></h3>
        <h4>h4 标题 <small>副标题</small></h4>
        <h5>h5 标题 <small>副标题</small></h5>
        <h6>h6 标题 <small>副标题</small></h6>
    </div>

在这里插入图片描述

  • 更多排版
<body>
    <p class="font-weight-bold">.font-weight-bold 加粗文本</p>
    <p class="font-weight-normal">.font-weight-normal 普通文本</p>
    <p class="font-weight-light">font-weight-light 更细的文本</p>
    <p class="font-italic">font-italic 斜体文本</p>
    <p class="lead">.lead 让段落更突出</p>
    <p class="small">.small 指定更小文本 (为父元素的 85% )</p>
    <p class="text-left">text-left 左对齐</p>
    <p class="text-center">text-center 居中</p>
    <p class="text-right">text-right 右对齐</p>

</body>

在这里插入图片描述

◼ .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
◼ .text-nowrap 段落中超出屏幕部分不换行
◼ .text-lowercase 设定文本小写
◼ .text-uppercase 设定文本大写
◼ .text-capitalize 设定单词首字母大写

  • 文本颜色
  <div class="container">
        <h2>代表指定意义的文本颜色</h2>
        <p class="text-muted">柔和的文本。</p>
        <p class="text-primary">重要的文本。</p>
        <p class="text-success">执行成功的文本。</p>
        <p class="text-info">代表一些提示信息的文本。</p>
        <p class="text-warning">警告文本。</p>
        <p class="text-danger">危险操作文本。</p>
        <p class="text-secondary">副标题。</p>
        <p class="text-dark">深灰色文字。</p>
        <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
        <p class="text-white">白色文本（白色背景上看不清楚）。</p>
    </div>

在这里插入图片描述

  • 背景颜色
<body>
    <div class="container">
        <h2>背景颜色</h2>
        <p class="bg-primary text-white">重要的背景颜色。</p>
        <p class="bg-success text-white">执行成功背景颜色。</p>
        <p class="bg-info text-white">信息提示背景颜色。</p>
        <p class="bg-warning text-white">警告背景颜色</p>
        <p class="bg-danger text-white">危险背景颜色。</p>
        <p class="bg-secondary text-white">副标题背景颜色。</p>
        <p class="bg-dark text-white">深灰背景颜色。</p>
        <p class="bg-light text-dark">浅灰背景颜色。</p>
    </div>
</body>

在这里插入图片描述

  • 表格
<div class="container">
    <table class="table table-striped">
        <tbody>
            <tr>
                <td>姓名</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>98</td>
                <td>90</td>
                <td>56</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>76</td>
                <td>79</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>66</td>
                <td>89</td>
                <td>98</td>
            </tr>
        </tbody>
    </table>

</div>

在这里插入图片描述
table-bordered 类可以为表格添加边框
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
table-dark 类可以为表格添加黑色背景

◼ .table-primary 蓝色: 指定这是一个重要的操作
◼ .table-success 绿色: 指定这是一个允许执行的操作
◼ .table-danger 红色: 指定这是可以危险的操作
◼ .table-info 浅蓝色: 表示内容已变更
◼ .table-warning 橘色: 表示需要注意的操作
◼ .table-active 灰色: 用于鼠标悬停效果
◼ .table-secondary 灰色: 表示内容不怎么重要
◼ .table-light 浅灰色，可以是表格行的背景
◼ .table-dark 深灰色，可以是表格行的背景

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 图像形状`
<body>
    <div class="conainer">
        <img class="rounded" src="./01.jpg" alt="">
        <img class="rounded-circle" src="./01.jpg" alt="">
        <img class="img-thumbnail" src="./01.jpg" alt="">
        <img class="float-left" src="./01.jpg" alt="">
    </div>
</body>

在这里插入图片描述

  • 信息提示框
<div class="container">
<h2>提示框</h2> <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p> <div class="alert alert-success">
<strong>成功!</strong> 指定操作成功提示信息。
</div> <div class="alert alert-info">
<strong>信息!</strong> 请注意这个信息。
</div> <div class="alert alert-warning">
<strong>警告!</strong> 设置警告信息。
</div> <div class="alert alert-danger">
<strong>错误!</strong> 失败的操作
</div> <div class="alert alert-primary">
<strong>首选!</strong> 这是一个重要的操作信息。
</div> <div class="alert alert-secondary">
<strong>次要的!</strong> 显示一些不重要的信息。
</div> <div class="alert alert-dark">
<strong>深灰色!</strong> 深灰色提示框。
</div> <div class="alert alert-light">
<strong>浅灰色!</strong>浅灰色提示框。
</div>
</div>

在这里插入图片描述
fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

<div class="alert alert-danger alert-dismissible fade show">
  • 按钮
<body>
    <button type="button" class="btn">基本按钮</button>
    <button type="button" class="btn btn-primary">主要按钮</button>
    <button type="button" class="btn btn-secondary">次要按钮</button>
    <button type="button" class="btn btn-success">成功</button>
    <button type="button" class="btn btn-info">信息</button>
    <button type="button" class="btn btn-warning">警告</button>
    <button type="button" class="btn btn-danger">危险</button>
    <button type="button" class="btn btn-dark">黑色</button>
    <button type="button" class="btn btn-light">浅色</button>
    <button type="button" class="btn btn-link">链接</button>
</body>

在这里插入图片描述

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Samsung
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <button class="dropdown-item">zuce</button>
      <button class="dropdown-item">denglv</button>

    </div>

  </div>

在这里插入图片描述

  • 徽章
<div class="container">
    <h2>徽章</h2>
    <h1>测试标题 <span class="badge badge-secondary">New</span></h1>
    <h2>测试标题 <span class="badge badge-secondary">New</span></h2>
    <h3>测试标题 <span class="badge badge-secondary">New</span></h3>
    <h4>测试标题 <span class="badge badge-secondary">New</span></h4>
    <h5>测试标题 <span class="badge badge-secondary">New</span></h5>
    <h6>测试标题 <span class="badge badge-secondary">New</span></h6>
  </div>

在这里插入图片描述

  <div class="container">
    <span class="badge badge-primary">主要</span> 
    <span class="badge badge-secondary">次要</span> 
    <span class="badge badge-success">成功</span> 
    <span class="badge badge-danger">危险</span> 
    <span class="badge badge-warning">警告</span> 
    <span class="badge badge-info">信息</span> 
    <span class="badge badge-light">浅色</span> 
    <span class="badge badge-dark">深色</span>
  </div>

在这里插入图片描述

  • 药丸徽章

使用 .badge-pill 类来设置药丸形状徽章:

  <div class="container">
    <h2>徽章</h2>
    <h1>测试标题 <span class="badge badge-secondary  badge-pill">New</span></h1>
    <h2>测试标题 <span class="badge badge-secondary badge-pill">New</span></h2>
    <h3>测试标题 <span class="badge badge-secondary badge-pill">New</span></h3>
    <h4>测试标题 <span class="badge badge-secondary badge-pill">New</span></h4>
    <h5>测试标题 <span class="badge badge-secondary badge-pill">New</span></h5>
    <h6>测试标题 <span class="badge badge-secondary badge-pill">New</span></h6>
  </div>

在这里插入图片描述

早川c
关注
专栏目录
Bootstrap 4
ANGWH的博客
05-10 504
Bootstrap 4 的改变:从Bootstrap 3的less 变成 Sass 编写，有5种栅格类，使用rem和em为单位（除部分margin和padding使用px），使用弹性盒模型（flexbox）的布局方式，放弃对IE8及低版本IE的支持。 Bootstrap4的5种栅格： 超小屏幕（col-）(<576px) 小屏幕（col-sm-）(≥576px) 中等屏幕（col-md-）(≥768px) 大屏幕（col-lg-） (≥992px) 超大屏幕（col-xl-）（≥1200px） B
bootstrap4实现购物商城
06-18
在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 首先，Bootstrap 4 提供了一套完整的网格系统，允许开发者轻松地创建多列布局...
Bootstrap4
JunChow
09-20 238
http://bs4.ntp.org.cn/ https://www.runoob.com/bootstrap4/bootstrap4-flex.html Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。 需要 jQuery, Popper.js, 以及 Bootstrap 自带的JS来实现功能...
BootStrap4
qq_43808599的博客
02-12 398
BootStrap介绍 1.Bottstrap是当前世界上最受欢迎的响应式（这也是最好的原因），移动设备优先的门户和应用前端框架 2.提供高质量的html，css以及javascript，让我们的web工程项目变的无比简单，包括官方的cdn和启动器服务 3完全翻译的中文官网：http://code.z01.com/v4/ 应用：前端：一套代码可以在不同设备上进行不同的响应：主要应用于展示性网站，不...
bootstrap-4-login-page：Bootstrap 4登录页面模板
01-30
Bootstrap 4登录页面模板 我的登录名是Bootstrap 4登录页代码段，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 产品特点 ...
select2-bootstrap4-theme：Bootstrap4的Select2 v4主题
01-29
select2-bootstrap4-主题 Bootstrap4的 v4主题（与boostrap 4.0.0+兼容） 现场演示 :backhand_index_pointing_right: 安装 CDN < link rel =" stylesheet " href =" /path/to/select2.css " > < link ...
Bootstrap4 for Axure9
12-29
Bootstrap 4 是一个广泛使用的前端开发框架，专为构建响应式和移动优先的网站而设计。它提供了丰富的组件、样式和JavaScript插件，使得...总的来说，"Bootstrap4 for Axure9"是提升原型设计效率和质量的有力资源。
bootstrap4中文离线手册.zip
12-07
这个"bootstrap4中文离线手册.zip"文件包含了所有关于Bootstrap 4的基础知识、组件、工具和最佳实践，方便开发者在没有网络连接的情况下查阅。 1. **基础知识**：Bootstrap 4 基于 HTML5 和 CSS3，使用 Less 作为预...
Bootstrap 4 – Responsive Web Design 无水印原版pdf
05-04
Bootstrap 4 – Responsive Web Design 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
bootstrap-4.zip
04-12
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
bootstrap4 js,css和font-awesome
11-18
bootstrap4 js,css和font-awesome,bootstrap4流行框架
简约大气的自适应（响应式）时尚网站源码
05-20
这份源码是一款简约大气的自适应（响应式）时尚类网站模板，特别适合初学者和新手小白学习与使用。它以简洁、现代的设计风格为特点，能够根据不同设备的屏幕尺寸自动调整布局，确保在各种平台上都能呈现出优秀的用户体验。注释清晰，适合初学者快速上手，学习并掌握网站前端开发的基本知识和技巧。
【学习笔记】Bootstrap4 - 用于HTML、CSS和JS开发的开源工具包
最新发布
shawxlee的CSDN博客
09-13 682
Bootstrap4 布局 1、移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签： <!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="w
CSS框架——Bootstrap4
仙女的博客
10-24 1677
一、Bootstrap介绍 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统...
Bootstrap4(十八)
shi199434的博客
12-18 342
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 button data-toggle="collapse" data-target="#demo">折叠button> div id="demo" class="collapse">Lorem ipsum dolor text....div> 尝试一下
Bootstrap4(一)重点----网格系统，图像形状，轮播，多媒体对象，滚动监听
m0_61016904的博客
11-19 1365
Bootstrap4重点一 . 网格系统二. 图像形状三. 轮播四 . 滚动监听(Scrollspy)五. 多媒体对象 一 . 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 1. 网格系统规则: 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 使用行来创建水平的列组。 内容需
Bootstrap4 教程
xueningyang555的博客
10-25 235
参考链接：https://www.runoob.com/bootstrap4/bootstrap4-makeawebsite.html
Bootstrap4 中文文档资源压缩包
资源摘要信息:"Bootstrap 4 是一个非常流行的前端框架，它主要用于快速开发响应式布局的网页。Bootstrap 4 是这个框架的第四个主要版本，相比之前的版本，它在各个方面都有了显著的改进和更新。本文件提供的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值