bootstrap 辅助类
可能会派上用场的辅助类
文字:
.text-muted 颜色 #777
.text-muted {
color: #777;
}
背景:
不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗: .bg-primary 等
其他:
浮动: .pull-left .pull-right
居中显示: .center-block 设置元素为块元素,并且居中显示
清楚浮动: .clearfix 在bootstrap中通过给父元素container 添加伪类 .clearfix::before{ clear: both} .clearfix::after{clear: both} (!不对的请指出)
.row { //行 bootstrap 把一行分成12份或列
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1 { //在xs尺寸屏占1列 一列 父元素的 width: 8.33333333%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left; // 浮动布局 且元素有内边距 注意在父元素上清楚浮动 .clearfix
}
显示下拉功能: .caret
定义一个下拉功能的按钮: (摘自菜鸟教程)
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">一个链接</a></li>
<li><a href="#">另一个链接 link</a></li>
<li><a href="#">其他功能</a></li>
</ul>
</div>
.dropup, .dropdown{position: relative}
.dropdown-toggle:focus { outline: 0;}
.btn-group{ position: relative; display: inline-block; vertical-align: middle;} //相对定位
.btn-group >.btn //相对定位,浮动
{
position: relative;
float: left; }
.dropdown-menu { //绝对定位
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none; //默认隐藏
float: left;
min-width: 160px;
padding: 5px 0; //padding-top: 5px ; padding-bottom: 5px
margin: 2px 0 0; //margin-top: 2px 上方的距离
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
阅读上显示,其他隐藏: .sr-only
显示隐藏: .show .hidden
转载于:https://www.cnblogs.com/baota/p/6496496.html
bootstrap 辅助类相关推荐
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:表格单元格使用了 bg-primary 类...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:在元素获取焦点时显示(如:键盘操作的用户)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
- BootStrap-
BootStrap- BootStrap:框架 响应式布局, 创建项目选择 1.Twitter Bootstrap https://v3.bootcss.com/css/#girl --样式介绍 ...
- bootstrap 元素
Bootstrap 笔记元素 学习网址:http://www.runoob.com/bootstrap/bootstrap-tutorial.html Bootstrap CSS Bootstrap ...
- Bootstrap 响应式开发(2021.10.13)
目录 一.响应式开发 1.框架含义 2.响应式 3.响应式尺寸划分 二.Bootstrap简介 1.Bootstrap概念 2.查阅Bootstrap文档 3.Bootstrap的使用 (1)创建文件 ...
- Web前端:Bootstrap最强总结 附详细代码 (带常用案例!)
Web前端基础: Web前端:HTML最强总结 附详细代码 Web前端:CSS最强总结 附详细代码 Web前端:JavaScript最强总结 附详细代码 Web前端工具: Web前端: JQuery最 ...
- 【Bootstrap】常用组件(框架)
Bootstrap常用组件 - 目录 1.网格系统(Grid System) - 网格系统的工作原理 - 不同设备的尺寸定义与其对应类名 - 基本的网格结构 - 偏移列 2.Bootstrap 表格 ...
- Bootstrap 内容聚合
一.Bootstrap 内容聚合 基于Bootstrap4 1.1 Bootstrap CSS Bootstrap 环境安装 Bootstrap 网格系统 Bootstrap 排版 Bootstrap ...
- Bootstrap框架菜鸟入门教程
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...
最新文章
- 在winform中从外部拖动节点到树形结构(treeview和listview相互拖动)(一)
- APL开发日志--2012-11-08
- Leetcode 79. 单词搜索 (每日一题 20210720 同类型题)
- python pyecharts_Python数据可视化之pyecharts
- Spring IoC 源码导读
- Linq使用Group By
- string.intern_使用String.intern()减少内存使用
- android程序的入口点,常见android面试基础题
- Python学习笔记:求一组数据的众数
- 融云发送图片消息_IM消息ID技术专题(五):开源分布式ID生成器UidGenerator的技术实现...
- 文艺编程 Literate Programming (原文中英文对照)
- 代码审查反馈提交修复时,是否应该压缩提交?
- 常用数学符号大学(包含罗马字符)
- 用python在大麦网抢票视频_大麦网怎么抢票快 大麦网抢票最快的方法
- [凯立德]2013年12月凯立德2013秋季版2F21J0E发布_我是亲民_新浪博客
- Aras innovator: 如何制作一个itemtype的BOM结构
- ★ 最长递增子序列问题 (最多不相交路径)(分层思想) 网络流最大流
- RT_Thread_串口数据解包
- 小旋风蜘蛛池X6.21去除授权站群+修复空白+弹窗
- W5100S SPI+DMA 中的片选信号处理
热门文章
- 利用Tomcat的用户名和密码构建“永久”后门
- 多柱汉诺塔最优算法设计探究
- cocos2d里面如何实现MVC(一)
- 商汤港理工提出基于聚类的联合建模时空关系的 GroupFormer 用于解决群体活动识别问题,性能SOTA...
- 自动特征工程、NAS、超参调优和模型压缩,微软开源的NNI一库搞定!
- CVPR 2019 | 旷视提出极轻量级年龄估计模型C3AE
- OpenCV手部关键点检测(手势识别)代码示例
- oracle 没有索引删除一行数据_Oracle数据库之索引
- 厉害了,比Transformer还好用!
- 自动驾驶计算本车离期望轨迹距离的方法