[璃猫]

璃猫博客

limao.pro

Boostrap框架样式表

Aurora

December 3, 2020

访问: 120 次

0 Comments

1184字数

#

Bootstrap 框架

首页 / Bootstrap 框架正文

Boostrap样式表

Boostrap基础样式

样式作用
.img-responsive响应式图像
.container-fluid容器[全屏 没有内边距]
.container容器[自适应 有15px内边距]
.lead字体更大更粗、行高更高
.text-left向左对齐文本
.text-center居中对齐文本
.text-right向右对齐文本
.text-muted本行内容是减弱的
.text-primary本行内容带有一个 primary class
.text-success本行内容带有一个 success class
.text-info本行内容带有一个 info class
.text-warning本行内容带有一个 warning class
.text-danger本行内容带有一个 danger class
.caret下拉箭头
.pull-left元素浮动到左边
.pull-right元素浮动到右边
.center-block设置为display:block;并居中显示
.clearfix清除浮动
.show强制显示
.hide强制隐藏
.jumbotron超大屏幕+圆角
.page-header页面标题
.thumbnail缩略图
.alert警告
.alert-success成功!
.alert-info信息!
.alert-warning警告!
.alert-danger错误!
.alert-dismissable可取消的警告
×关闭按钮



栅格系统

样式作用
row
col
col-*-offset偏移列
col-md-push-*向右排序
col-md-pull-*向左排序
col-lg-*大型设备台式电脑(≥1200px)
col-md-*中型设备台式电脑(≥992px)
col-sm-*小型设备平板电脑(≥768px)
col-xs-*超小设备手机(<768px)



Table表格样式

样式作用
.table为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered为所有表格的单元格添加边框
.table-hover在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed让表格更加紧凑
.active悬停单元格颜色
.success表示成功的操作
.info表示信息变化的操作
.warning表示一个警告的操作
.danger表示一个危险的操作



Form表单样式

样式作用
role="form"表单[配合使用001]向form添加
.form-group表单[配合使用001]向父元素div添加[获取最佳间距所必需]
.form-control表单[配合使用001]向表单元素添加
.form-inline向左对齐的并排排列[form添加]
.form-horizontal水平表单[配合使用002+form]
.control-label水平表单[配合使用002+label]
rows="3"textarea标签长度控制
Checkbox复选框[配合 type 使用]
Radio单选框[配合 type 使用]
name="optionsRadios"单选框配组
value="option1"单选框分配
<Select>选择框
multiple="multiple"允许用户多个选择
.form-control-static静态控件
.input-lg表单高度
.col-lg-*表单宽度
.help-block提示元素[input下方配合span使用]



But按钮样式

样式作用
.btn为按钮添加基本样式
.btn-default默认/标准按钮
.btn-primary原始按钮样式(未被操作)
.btn-success表示成功的动作
.btn-info该样式可用于要弹出信息的按钮
.btn-warning表示需要谨慎操作的按钮
.btn-danger表示一个危险动作的按钮操作
.btn-link让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg制作一个大按钮
.btn-sm制作一个小按钮
.btn-xs制作一个超小按钮
.btn-block块级按钮(拉伸至父元素100%的宽度)
.active按钮被点击
.disabled禁用按钮
.btn-group按钮组
.btn-toolbar按钮组集
.btn-group-lg/sm/xs按钮组大小
.btn-group-vertical按钮组垂直排列
.btn-group-justified自适应按钮组
.data-toggle="dropdown"下拉框[配合使用001]-下拉框设置
.dropdown-menu+role="menu"下拉框[配合使用001]-下拉框内容设置
.close显示关闭按钮
.caret显示下拉功能
.form-control[输入框组005]内容框
.input-group-addon提示内容框组



Img图片样式

样式作用
.img-rounded添加圆角6px
.img-circle
.img-thumbnail设置内边距和灰色边框+缩略图功能
.img-responsive自适应图片



响应式工具

元素/屏幕超小屏幕+手机 (<768px)小屏幕+平板 (≥768px)中等屏幕+桌面 (≥992px)大屏幕+桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏



Nav导航元素

样式作用
.nav无序列表 导航
.nav-tabs标签页式导航样式
.nav-pills胶囊式导航样式
.active默认选择
.nav-stacked垂直排列
.nav-justified两端对齐
.dropdown导航下拉元素[在li元素里+样式设置在span下拉图标上]
.navbar导航栏
.navbar-default导航栏-默认样式
.collapse+.navbar-collapse自适应导航内容
.navbar-toggle+data自适应按钮框架
data-toggle告诉按钮需要做什么
data-target告诉按钮切换到那个元素
.navbar-form导航表单
.navbar-btn导航栏中的按钮
.navbar-text导航栏中的文本
.navbar-fixed-top固定到顶部
.navbar-fixed-bottom固定到底部
.navbar-static-top静态的顶部
.navbar-inverse反色的导航栏
.active默认样式
.pagination默认的分页
.disabled禁止
.pagination-lg分页大小
.page翻页
.previous上一页
.next上一页
.disabled默认样式
.badge徽章



Label标签

样式作用
.label标签
.label-default默认的灰色标签
.label-primary蓝色标签
.label-success绿色标签
.label-info浅蓝色标签
.label-warning黄色标签
.label-danger红色标签



进度条

样式作用
.progress进度条框
.progress-bar进度条长度[style="width: 40%;"]
.progress-bar-success颜色
.progress-bar-info颜色
.progress-bar-warning颜色
.progress-bar-danger颜色
.progress-striped螺纹进度条[父元素]



多媒体对象

样式作用
.media多媒体
.media-left向左浮动
.media-body多媒体内容
.media-heading内容头部



列表组

样式作用
.list-group列表组
.list-group-item列表组列
.badge徽章



面板

样式作用
.panel面板
.panel-default面板默认样式
.panel-body面板内容
.panel-heading面板头部
.panel-title面板头部标题
.panel-footer面板尾部内容
.panel-primary蓝背景白字
.panel-success头部面板颜色
.panel-info头部面板颜色
.panel-warning头部面板颜色
.panel-danger头部面板颜色
.table面板内容表格样式

本文为原创知识文章,版权归 璃猫博客 所有,转载请注明出处!

本文链接: https://www.limao.pro/archives/022.html

友情提示:如果博客部分链接出现404,请留言或者 联系博主 修复。

最后修改时间:December 3, 2020

© 本文允许规范转载

嗨!猫客,不妨给 5秒 时间,赞赏一下本博客吧!( 其实本博主在按钮里藏了支付宝红包哦~ )

上一篇
下一篇

发布你的观点趴i

评论 ( 请使用真实邮箱地址,以便接收评论回复信息 )

选择表情

还没有小可爱发布评论呢~ o(╥﹏╥)o

下面没有内容啦!(°Д°) 太长啦~我快被撑爆啦!o(╥﹏╥)o

热门文章
TYPECHO恋爱主题 - 往后余生 November 29, 2020
CSS样式表 November 26, 2020
JAVA环境安装与编程软件Eplices安装教程 November 23, 2020

站内活动 时间一般均为 7天 时间

欢迎各位猫客,本站运营初期,不足之处欢迎大家指点。(灬°ω°灬)

博客资料
  • 文章数目

    70

  • 评论数目

    9

  • 站内页面

    3

  • 运行天数

    0年202天

广而告之
我在等你呢~
[享受生活 做最酷的自己]
[头像]

Aurora

环游是无趣,至少可以陪着你~

×
SUPPORT