【10】Bootstrap — 辅助类

Bootstrap样式技巧
最新推荐文章于 2018-12-28 08:52:33 发布
原创 最新推荐文章于 2018-12-28 08:52:33 发布 · 241 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #辅助类

本文介绍了使用Bootstrap框架进行网页设计时的一些实用技巧，包括文本颜色、背景色设置、元素浮动与居中处理、显示与隐藏效果等。

情景文本颜色

<!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>

显示或隐藏

有心博客
关注
Bootstrap常用的辅助类
覃庆奖
03-09 607
前言 学习Bootstrap的好处就是大大提高了前端的开发速度，节约成本，而今天所介绍的Bootstrap常用的辅助类，有文本，背景，还有元素的辅助类。 （1）文本辅助类 主要有（text-muted,text-primary,text-success,text-info,text-warning,text-warning,text-danger），文本辅助类，就是能显示出多样的文本颜色，这...
Bootstrap 辅助类
xyq2024的博客
07-16 351
Bootstrap 是一个流行的前端框架，它提供了一套丰富的辅助类，这些类可以帮助开发者快速实现各种布局和样式效果，提高开发效率。本文将详细介绍 Bootstrap 的辅助类，包括文本、背景、边框、浮动、定位、响应式工具等。
Bootstrap(十二)
shi199434的博客
12-12 418
Bootstrap 辅助类 本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。 文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： 类 描述 实例 .text-muted "text-muted" 类的文本样式 尝试一下 .text-primary "text-
bootstrap29-辅助类展示不同的文本颜色
weixin_34279579的博客
02-07 175
<!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 150
可能会派上用场的辅助类 文字： .text-muted 颜色 #777 .text-muted { 　　color: #777;} 背景： 　　不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗： .bg-primary 等 其他： 　　浮动： .pull-left .pull-right 　　居中显示： .center-block...
bootstrap辅助类（９）
qq_43687284的博客
12-28 341
文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： 类 描述 实例 .text-muted “text-muted” 类的文本样式 .text-primary “text-primary” 类的文本样式 .text-success “text-success” 类的文本样式 .text-info “text-info” 类的文本样式 .text-warning...
Bootstrap 的辅助类
歪脖先生的博客
03-12 436
辅助类Bootstrap提供了大量的公共样式类，有的用于辅助设计，有的作为工具供用户使用。以下是 4 个常用的辅助类：.pull-left：用于把元素浮动到容器左侧。.pull-right：用于把元素浮动到容器右侧。.muted：用于把页面元素的颜色改为 #999。.clearfix：为任意页面元素清除浮动。版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。...
BootStrap辅助类
qq_35377740的博客
07-16 277
文本颜色text-muted（默认灰色），text-primary（首选蓝色）， text-success（成功绿色），text-warning（警告黄色），text-info（信息天蓝色）， text-danger（危险红色）背景颜色bg-primary（首选蓝色）， bg-success（成功绿色），bg-warning（警告黄色），bg-info（信息天蓝色）， bg-danger（危险红色...
bootstrap开发辅助文档
05-16
这个"bootstrap开发辅助文档"是针对Bootstrap框架的一个API参考，帮助开发者理解并有效地利用其功能。 Bootstrap的核心特性包括响应式布局、网格系统、组件和JavaScript插件。响应式布局使得网站能够适应各种屏幕...
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
在本文中，我们将深入探讨BootStrap框架中的图片样式、辅助类样式以及CSS组件的实例应用。Bootstrap是一款流行的前端开发框架，它提供了丰富的预定义样式和组件，使得开发者能够快速构建响应式和移动设备优先的网页...
bootstrap-dark-5:暗模式和Bootstrap辅助指南5-v4暗模式POC的延续
03-27
暗模式和Bootstrap辅助指南5 v4黑暗模式POC的延续，但这次是v5 这是的后续工作，并且与 （ ）有关。 如果您要进行的相同工作，请访问。 这是一个``进行中的工作''，专门基于Bootstrap 5-Beta 3- 尚不建议在...
2023最新简绘AI开源版支持MJ绘画，AI问答源码
09-12
简绘AI开源版，搭建教程如下 测试环境：Nginx+PHP7.4+MySQL5.6 上传直接安装即可
通用工具库组件，包括前后台判断，拦截器时间，心跳轮询库，Task任务库，二维码扫码库，转场动画库，通用TTS音频播放库，
09-12
通用工具库组件，包括前后台判断，拦截器时间，心跳轮询库，Task任务库，二维码扫码库，转场动画库，通用TTS音频播放库，国际化locale库等等.zip
一款基于MVVM架构的学习小项目，已经实现的功能有： 1.新闻和视频列表的查看 2.基于高德地图实现定位和城市搜索 3.
09-12
一款基于MVVM架构的学习小项目，已经实现的功能有： 1.新闻和视频列表的查看 2.基于高德地图实现定位和城市搜索 3.基于高德地图实现的城市天气查询 4.基于百度智能云实现网络图片、本地图片以及拍照图片的OCR识别。 5.实现记事本功能和待办功能 6.支持二维码扫一扫 7.支持在线版本更新.zip
QRCode（二维码）.zip
09-12
QRCode（二维码）.zip
二维码扫描(17).zip
09-12
二维码扫描(17).zip
SpringBoot + ajax 轮询,实现扫描二维码登录的小demo.zip
09-12
SpringBoot + ajax 轮询,实现扫描二维码登录的小demo.zip
二维码扫描(42).zip
最新发布
09-12
二维码扫描(42).zip
BootStrap样式与组件实战：图片、辅助类与CSS详解
"BootStrap 图片样式、辅助类样式和CSS组件的实例详解" Bootstrap 是一个流行的前端开发框架，它提供了丰富的预定义样式、组件和工具，帮助开发者快速构建响应式和移动优先的网页。本篇文章主要关注的是BootStrap中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值