码迷,mamicode.com
首页 > 其他好文 > 详细

2021/6/11 Bootstarp v3 浅记

时间:2021-06-13 09:23:32      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:button   cas   标题   init   for   容器   sel   input框   信息   

‘‘‘
布局容器
.container 2-8-2 布局,取其中8
.container-fluid 全局占满空间
栅格系统
.row 将块级标签划分12等份
.col-xs/sm/md/lg-n 设置本标签占据份数
.col-xs/sm/md/lg-offset-n 设置从左向右移动的份数,后面无用份数被填充
.col-xs/sm/md/lg-push-n 重新排版,设置距离左侧的份数
.col-xs/sm/md/lg-pull-n 重新排版,设置距离右侧的份数
xs/sm/md/lg 分别对应手机/平板/中等显示器/大显示器
排版
标题
.h1~h6 <h1~h6> 为行内元素添加.h1~h6可以作为标题使用
.small <small> 当存在标题标签内部,作为副标题使用

页面主题
<body>
<p>
均在原基础上进行些微样式调整
<p class="lead"> 文本突出

字体
<mark> .mark 高亮
<strong> 加粗
<em>/<cite>/<var> 斜体
<ins> 下划线
<del> 删除线
<small> 小文本字体

文本对齐
.text-left/justify/nowrap/right/center
文本左/左/左/右/居中对齐

文本大小写
.text-lowercase/uppercase/capitalize
文本全小写/大写/每个单词首字母大写

文本颜色
.text-muted/primary/success/info/warning/danger
文本灰色/蓝色/绿色/蓝色/黄色/红色

文本替换图片
.text-hide 使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

缩略语
<abbr title="鼠标悬浮文本" class="initialism">
缩略语即文本字体下面出现下划虚线,悬浮文本则出现title提示信息
.initialism 用于设置缩略语字体略小

地址
<address>

引用
<blockquote> 任何HTML代码被包裹在blockquote中都会变现引用样式
<footer> 文本前面出现一条中划线(——xxx)

代码
<code> 用于包裹代码,呈现:文字红色、背景淡红
<kdb> 用于包裹用户输入,呈现:文字色白,背景纯黑
<pre> 用于包括代码块
.pre-scrollable 设置 max-height 为 350px ,并在垂直方向展示滚动条。
<var> 用于包裹变量,斜体
<samp> 用于包裹程序输出内容

表格
基本样式
.table 表格基本样式,增加少量padding和水平方向的表格分隔线
.table-striped 为`<tbody>`内每一行增加斑马条纹样式,一浅一深
.table-bordered 为表格中每个单元格增加边框
.table-hover 增加`<tbody>`中的每一行的鼠标悬停状态
.table-condensed 表格每个单元格的padding减半
状态样式
.active 暗灰色
.success 淡绿色
.info 淡蓝色
.warning 淡黄色
.danger 淡红色
响应式表格
.table-responsive <768PX 出现水平滚动条 >768PX 水平滚动条消失

表单
基本样式
.form-inline form表单内所有元素均设为行内元素,存在于一行中,宽度最好>768PX,否则折叠
.form-horizontal form表单内可以使用栅格系统进行布局,form-group代表row
.form-group form-group内form子标签得到相应的布局
.form-group-lg 为 .form-horizontal 包裹的 label 元素和表单控件设置尺寸为大
.form-group-sm 为 .form-horizontal 包裹的 label 元素和表单控件设置尺寸为小
.form-control 设置该类的form子标签,则宽度被设为100%
.sr-only 设置label标签隐藏
.control-label 设置在form-horizontal内的label标签排版靠右

文本域textarea
rows="行数" 设置textarea文本域可以显示的行数

单选、多选框radio、checkbox
.disabled 禁止选项框选择,不修改选项框样式
disabled 禁止选项框选择,修改选项框颜色暗淡
.radio 设置选项框单选为块级标签
.radio-inline 设置选项框单选为行内标签
.checkbox 设置选项框多选为块级标签
.checkbox-inline 设置选项框多选为行内标签

下拉菜单select
对于标记了 multiple 属性的 `<select> `控件来说,默认显示多选项。

label
静态控件
form-control-static 为 `<p> `元素添加 .form-control-static可以实现纯文本与label放置同一行。

input
input默认存在焦点样式
disabled input禁止(ps: .disabled对text、password等无用)
readonly input只读

input尺寸控制
input-lg 大
input-sm 小
col-lg/sm-n 设置宽度

help-text
为input框下方增加一行帮助文本
<span class="help-block"></span>

校验状态
存在以下标签内部的 .control-label、.form-control、.help-block 子标签,都会被改变样式
.has-success 淡绿色
.has-warning 淡黄色
.has-error 淡红色

反馈图标
反馈图标(feedback icon)只能使用在文本输入框`<input class="form-control">` 元素上。
.has-feedback 设置允许子类存在反馈图标
<span class="glyphicon
glyphicon-ok/glyphicon-warning-sign/glyphicon-remove
form-control-feedback
"></span>

按钮
a role="button"
btn
.close

btn-default
btn-success
btn-info
btn-warning
btn-danger
btn-primary
btn-link

btn-lg/sm/xs

btn-block

disabled

辅助类
情景文本颜色
text-muted/success/info/primary/warning/danger
灰色、绿、蓝、深蓝、黄、红
情景背景颜色
bg-success/info/primary/warning/danger
关闭按钮
&times;
三角符号
.caret
快速浮动
pull-left
pull-right
内容块居中
center-block
取消浮动
clearfix
显示、隐藏内容
show
hidden
sr-only sr-only-focusable
text-hide

响应式工具
针对性显示
.visible-xs/sm/md/lg-*
*: block/inline/inline-block
针对性屏蔽
.hidden-xs/sm/md/lg

visible-print-*
*: block/inline/inline-block
hidden-print
‘‘‘


2021/6/11 Bootstarp v3 浅记

标签:button   cas   标题   init   for   容器   sel   input框   信息   

原文地址:https://www.cnblogs.com/zhangzhuowei/p/14875909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!