【10】Bootstrap — 辅助类

最新推荐文章于 2023-07-13 21:17:45 发布
最新推荐文章于 2023-07-13 21:17:45 发布
阅读量211 收藏
点赞数
文章标签： bootstrap 辅助类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/77844606
版权

情景文本颜色

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
        <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
        <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
        <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
    </body>
</html>

情景文本颜色

情景背景色

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
        <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
        <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
    </body>
</html>

情景背景色

关闭按钮

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    </body>
</html>

关闭按钮

三角符号

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <span class="caret"></span>
    </body>
</html>

三角符号

快速浮动

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div class="pull-left" style="width: 100px;height: 100px;background-color: greenyellow;">...</div>
        <div class="pull-right" style="width: 100px;height: 100px;background-color: red;">...</div>
    </body>
</html>

快速浮动

让内容块居中

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div class="center-block" style="width: 100px;height: 100px;background-color: brown;"></div>
    </body>
</html>

内容块居中

清除浮动

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div>
            <div style="float: left;width: 100px;height: 100px;background-color: green;">AAAAA</div>
            <div style="float: right;width: 100px;height: 100px;background-color: red;">BBBBB</div>
        </div>
        <div style="height: 110px;width: 110px;background-color: blue;">CCCC</div>
        <hr/>
        <div class="clearfix">
            <div style="float: left;width: 100px;height: 100px;background-color: green;">AAAAA</div>
            <div style="float: right;width: 100px;height: 100px;background-color: red;">BBBBB</div>
        </div>
        <div style="height: 110px;width: 110px;background-color: blue;">CCCC</div>
    </body>
</html>

清除浮动

显示或隐藏内容

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <div>AA</div>
        <div>BB</div>
        <hr/>
        <div class="show">AA</div>
        <div class="hidden">BB</div>
    </body>
</html>

显示或隐藏

有心博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap常用的辅助类
覃庆奖
03-09 515
前言 学习Bootstrap的好处就是大大提高了前端的开发速度，节约成本，而今天所介绍的Bootstrap常用的辅助类，有文本，背景，还有元素的辅助类。 （1）文本辅助类 主要有（text-muted,text-primary,text-success,text-info,text-warning,text-warning,text-danger），文本辅助类，就是能显示出多样的文本颜色，这...
Bootstrap 辅助类
12-14
Bootstrap 辅助类 本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。 文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： 类 描述 实例 .text-muted “text-muted” 类...
Bootstrap(十二)
shi199434的博客
12-12 339
Bootstrap 辅助类 本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。 文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： 类 描述 实例 .text-muted "text-muted" 类的文本样式 尝试一下 .text-primary "text-
bootstrap29-辅助类展示不同的文本颜色
weixin_34279579的博客
02-07 142
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 辅助类</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/...
bootstrap 辅助类
weixin_30387423的博客
03-03 113
可能会派上用场的辅助类 文字： .text-muted 颜色 #777 .text-muted { 　　color: #777;} 背景： 　　不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗： .bg-primary 等 其他： 　　浮动： .pull-left .pull-right 　　居中显示： .center-block...
bootstrap辅助类（９）
qq_43687284的博客
12-28 300
文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： 类 描述 实例 .text-muted “text-muted” 类的文本样式 .text-primary “text-primary” 类的文本样式 .text-success “text-success” 类的文本样式 .text-info “text-info” 类的文本样式 .text-warning...
Bootstrap 的辅助类
歪脖先生的博客
03-12 392
辅助类Bootstrap提供了大量的公共样式类，有的用于辅助设计，有的作为工具供用户使用。以下是 4 个常用的辅助类：.pull-left：用于把元素浮动到容器左侧。.pull-right：用于把元素浮动到容器右侧。.muted：用于把页面元素的颜色改为 #999。.clearfix：为任意页面元素清除浮动。版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。...
2.9 Bootstrap 辅助类
梁辰兴的博客
07-13 197
如需对齐导航栏中的组件，请使用 .navbar-left 或 .navbar-right 代替。您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。下面的实例演示了这点。您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。您可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。以下不同的类展示了不同的文本颜色。如需清除元素的浮动，请使用 .clearfix class。
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
在本文中，我们将深入探讨BootStrap框架中的图片样式、辅助类样式以及CSS组件的实例应用。Bootstrap是一款流行的前端开发框架，它提供了丰富的预定义样式和组件，使得开发者能够快速构建响应式和移动设备优先的网页...
bootstrap开发辅助文档
05-16
这个"bootstrap开发辅助文档"是针对Bootstrap框架的一个API参考，帮助开发者理解并有效地利用其功能。 Bootstrap的核心特性包括响应式布局、网格系统、组件和JavaScript插件。响应式布局使得网站能够适应各种屏幕...
Bootstrap分页类
05-10
9. **辅助类**：Bootstrap还提供了一些辅助类，如`.justify-content-center`和`.justify-content-end`，用于控制分页链接在容器内的水平对齐方式。 在实际应用中，Bootstrap分页类不仅可以用于网页内容的分页，还...
Mnist数据集，用于人工智能相关基础模型的学习及编程练习
09-06
Mnist数据集，用于人工智能相关基础模型的学习及编程练习
水空两用无人机动力系统设计与研究.pdf
09-06
水空两用无人机动力系统设计与研究.pdf
大神asp新闻发布系统毕业课程设计项目+论文
09-06
编号：55 摘要：随着计算机技术的广泛应用,在新闻发布中引入计算机管理技术,成为一个值得深入研究的问题。本系统采用ASP+ACCESS作为开发环境,本文首先概要的论述了ASP的有关知识与现状,之后，对本系统作了系统的描述,在此基础上，对系统的总体框架和数据库进行了设计，然后，对开发一个小型的新闻信息发布管理系统的各个关键模块实现进行了详细说明。 关键词： 新闻发布，新闻管理，asp，access 目 录 第一章 前　言 1 第二章 系统概述 2 2.1 开发背景 2 2.2 可行性分析 2 2.3 需求分析 3 2.4 asp技术概述 3 2.4.1 ASP的特点 3 2.4.2 ASP的工作原理 4 2.4.3 ASP环境的安装与配置 5 2.5 Access 2003 数据库工具概述 5 2.5.1选择Access2003 作为后台数据库 6 2.5.2 ADO开发数据库 6 第三章 总体设计 8 3.1 系统总体功能设计 8 3.2 系统数据库设计 9 3.2.1 超级管理员表(admin表)设计 9 3.2.2 新闻信息表(news表)设计 10 3.2.3 新闻栏目表(
矫正图像带的旋转角度信息和目标检测标签坐标也随之改变.zip
09-06
1 目标检测的定义 目标检测（Object Detection）的任务是找出图像中所有感兴趣的目标（物体），确定它们的类别和位置，是计算机视觉领域的核心问题之一。由于各类物体有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具有挑战性的问题。 目标检测任务可分为两个关键的子任务，目标定位和目标分类。首先检测图像中目标的位置（目标定位），然后给出每个目标的具体类别（目标分类）。输出结果是一个边界框（称为Bounding-box，一般形式为(x1,y1,x2,y2)，表示框的左上角坐标和右下角坐标），一个置信度分数（Confidence Score），表示边界框中是否包含检测对象的概率和各个类别的概率（首先得到类别概率，经过Softmax可得到类别标签）。 1.1 Two stage方法 目前主流的基于深度学习的目标检测算法主要分为两类：Two stage和One stage。Two stage方法将目标检测过程分为两个阶段。第一个阶段是 Region Proposal 生成阶段，主要用于生成潜在的目标候选框（Bounding-box proposals）。这个阶段通常使用卷积神经网络（CNN）从输入图像中提取特征，然后通过一些技巧（如选择性搜索）来生成候选框。第二个阶段是分类和位置精修阶段，将第一个阶段生成的候选框输入到另一个 CNN 中进行分类，并根据分类结果对候选框的位置进行微调。Two stage 方法的优点是准确度较高，缺点是速度相对较慢。 常见Tow stage目标检测算法有：R-CNN系列、SPPNet等。 1.2 One stage方法 One stage方法直接利用模型提取特征值，并利用这些特征值进行目标的分类和定位，不需要生成Region Proposal。这种方法的优点是速度快，因为省略了Region Proposal生成的过程。One stage方法的缺点是准确度相对较低，因为它没有对潜在的目标进行预先筛选。 常见的One stage目标检测算法有：YOLO系列、SSD系列和RetinaNet等。 2 常见名词解释 2.1 NMS(Non-Maximum Suppression) 目标检测模型一般会给出目标的多个预测边界框，对成百上千的预测边界框都进行调整肯定是不可行的,需要对这些结果先进行一个大体的挑选。NMS称为非极大值抑制，作用是从众多预测边界框中挑选出最具代表性的结果，这样可以加快算法效率，其主要流程如下： 设定一个置信度分数阈值，将置信度分数小于阈值的直接过滤掉 将剩下框的置信度分数从大到小排序，选中值最大的框 遍历其余的框，如果和当前框的重叠面积(IOU)大于设定的阈值（一般为0.7），就将框删除（超过设定阈值，认为两个框的里面的物体属于同一个类别） 从未处理的框中继续选一个置信度分数最大的，重复上述过程，直至所有框处理完毕 2.2 IoU(Intersection over Union) 定义了两个边界框的重叠度，当预测边界框和真实边界框差异很小时，或重叠度很大时，表示模型产生的预测边界框很准确。边界框A、B的IOU计算公式为: 2.3 mAP(mean Average Precision) mAP即均值平均精度，是评估目标检测模型效果的最重要指标，这个值介于0到1之间，且越大越好。mAP是AP(Average Precision)的平均值，那么首先需要了解AP的概念。想要了解AP的概念，还要首先了解目标检测中Precision和Recall的概念。 首先我们设置置信度阈值（Confidence Threshold）和IoU阈值（一般设置为0.5，也会衡量0.75以及0.9的mAP值）： 当一个预测边界框被认为是True Positive（TP）时，需要同时满足下面三个条件： Confidence Score > Confidence Threshold 预测类别匹配真实值(Ground truth)的类别 预测边界框的IoU大于设定的IoU阈值 不满足条件2或条件3，则认为是False Positive（FP）。当对应同一个真值有多个预测结果时，只有最高置信度分数的预测结果被认为是True Positive，其余被认为是False Positive。 Precision和Recall的概念如下图所示： Precision表示TP与预测边界框数量的比值 Recall表示TP与真实边界框数量的比值 改变不同的置信度阈值，可以获得多组Precision和Recall，Recall放X轴，Precision放Y轴，可以画出一个Precision-Recall曲线，简称P-R
技术方案资料技术方案资料PCB设计高级教程资料.zip
09-06
技术方案资料技术方案资料PCB设计高级教程资料.zip
8051Proteus仿真c源码用定时器T0的中断实现长时间定时
09-06
8051Proteus仿真c源码用定时器T0的中断实现长时间定时提取方式是百度网盘分享地址
基于Java Swing框架的知识付费管理系统.zip
最新发布
09-06
基于Java Swing框架的知识付费管理系统 项目简介 本项目是一个基于Java Swing框架开发的知识付费管理系统，旨在提供一个用户友好的界面，用于管理知识付费资源的上传、用户登录、日历视图展示以及个人中心功能。系统通过Java的图形用户界面（GUI）组件，实现了用户登录验证、数据库连接、日历视图展示以及个人中心的多功能模块。 项目的主要特性和功能 1. 数据库连接 通过DataBase类实现与MySQL数据库的连接，支持对management数据库的访问。 2. 用户登录 提供图形化的登录界面，用户输入用户名和密码后进行验证，验证成功后根据用户等级跳转到相应的主界面。 使用LoginWindow类实现登录窗口的创建和事件处理。 3. 日历视图 实现了一个日历视图组件ViewCalendar，用户可以浏览不同的月份并查看每个月的日期信息。 支持用户通过按钮进行月份的切换和日期的查询。
BootStrap样式与组件实战：图片、辅助类与CSS详解
"BootStrap 图片样式、辅助类样式和CSS组件的实例详解" Bootstrap 是一个流行的前端开发框架，它提供了丰富的预定义样式、组件和工具，帮助开发者快速构建响应式和移动优先的网页。本篇文章主要关注的是BootStrap中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值