# 控件状态
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < div class = "container" > < fieldset disabled = "disabled" > < legend >平台登录</ legend > < form action = "" class = "form-horizontal" > < div class = "form-group has-warning has-feedback" > < label for = "uname" class = "col-sm-2 control-label" >账户: </ label > < div class = "col-sm-10" > < input type = "text" name = "uname" id = "uname" class = "form-control" > < span class = "glyphicon glyphicon-warning-sign form-control-feedback" ></ span > </ div > </ div > < div class = "form-group has-success has-feedback" > < label for = "upass" class = "col-sm-2 control-label" >密码: </ label > < div class = "col-sm-10" > < input type = "text" name = "upass" id = "upass" class = "form-control" > < span class = "glyphicon glyphicon-ok-sign form-control-feedback" ></ span > </ div > </ div > < div class = "form-group has-error" > < div class = "col-sm-offset-2 col-sm-10" > < label for = "" class = "checkbox-inline" >< input type = "checkbox" name = "is_remember" id = "is_remember" > 是否记住密码?</ label > </ div > </ div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < button class = "btn btn-default" >登录</ button > </ div > </ div > </ form > </ fieldset > </ div > |
说明: BootStrap控件状态分为焦点状态,禁用状态,验证提示状态,焦点状态其实是在:focus上设置outline为0然后添加了一个柔和的box-shadow,而对于radio/checkbox使其更加圆润,禁用状态用法不变,一旦对fieldset设置了disabled,那么内部所有的表单都会被disabled,且background-color: #eee;验证提示通过对附加form-group的div附加has-success/has-warning/has-error来改变label的和边框的颜色实现对成功/警告/错误信息的提示.有时候在验证状态的时候提供小图标提示,可通过继续附加feedback类,.has-feedback {position: relative;} .has-feedback .form-control {padding-right: 42.5px} .has-feedback .form-control-feedback {position: absolute;top: 25px;right: 0;}其实就是先将表单父类容器设置为相对定位,然后把附加form-control-feedback的元素绝对定位到右边来实现小图标提示效果.
# 控件大小
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < div class = "container" > < fieldset > < legend >平台登录</ legend > < form action = "" class = "form-horizontal" > < div class = "form-group" > < label for = "uname" class = "col-sm-2 control-label" >账号: </ label > < div class = "col-sm-10" > < input type = "text" class = "form-control input-lg" name = "uname" id = "uname" > </ div > </ div > < div class = "form-group" > < label for = "upass" class = "col-sm-2 control-label" >密码: </ label > < div class = "col-sm-10" > < input type = "text" name = "upass" id = "upass" class = "form-control input-sm" placeholder = "密码" > </ div > </ div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < label for = "" class = "checkbox-inline" >< input type = "checkbox" name = "is_remember" id = "is_remember" > 是否记住密码?</ label > </ div > </ div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < button class = "btn btn-default" >登录</ button > </ div > </ div > </ form > </ fieldset > </ div > |
说明: BootStrap默认为input/select/textarea分别提供了input-lg和input-sm附加类,前者高度和行高被设置到46px,字体和边框都稍有调整,后者高度和行高被设置为30px,字体和边框稍有修改,可以很方便的按照规则定义其它的样式如.input-mini.
# 显示帮助
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < div class = "container" > < fieldset > < legend >平台登录</ legend > < form action = "" class = "form-horizontal" > < div class = "form-group" > < label for = "uname" class = "col-sm-2 control-label" >账号: </ label > < div class = "col-sm-10" > < input type = "text" class = "form-control" name = "uname" id = "uname" > < span class = "help-block" >只能包含字母数字下划线</ span > </ div > </ div > < div class = "form-group" > < label for = "upass" class = "col-sm-2 control-label" >密码: </ label > < div class = "col-sm-10" > < input type = "text" name = "upass" id = "upass" class = "form-control" placeholder = "密码" > < span class = "help-block" >必须包含字母数字下划线</ span > </ div > </ div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < label for = "" class = "checkbox-inline" >< input type = "checkbox" name = "is_remember" id = "is_remember" > 是否记住密码?</ label > </ div > </ div > < div class = "form-group" > < div class = "col-sm-offset-2 col-sm-10" > < button class = "btn btn-default" >登录</ button > </ div > </ div > </ form > </ fieldset > </ div > |
说明: BootStrap默认还为我们提供了一个help-block类,用于在表单中显示块儿级的帮助信息,其实就是display: block;margin-top: 5px; margin-bottom: 10px; color: #737373;如果要将帮助信息显示在一行可设置一个.help-inline {display: inline-block; padding-left: 5px;color:#737373;}实现.
# 按钮样式
1 2 3 4 5 6 7 8 9 10 11 12 13 | < div class = "container" > < form action = "" > < div class = "form-group" > < button class = "btn btn-default" >标准按钮</ button >qw < button class = "btn btn-primary" >重要按钮</ button > < button class = "btn btn-success" >成功按钮</ button > < button class = "btn btn-info" >提示按钮</ button > < button class = "btn btn-warning" >警告按钮</ button > < button class = "btn btn-danger" >错误按钮</ button > < button class = "btn btn-link" >链接按钮</ button > </ div > </ form > </ div > |
说明: BootStrap默认提供了7种样式的按钮风格,分别btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger/btn-link,基于btn基础样式,也对默认的:foucs/:active/:hover/:disabled定义了相关变化.
# 按钮大小
1 2 3 4 5 6 7 8 9 10 | < div class = "container" > < form action = "" > < div class = "form-group" > < button class = "btn btn-default btn-lg" >标准大按钮</ button > < button class = "btn btn-default btn-sm" >标准中按钮</ button > < button class = "btn btn-default btn-xs" >标准小按钮</ button > < button class = "btn btn-default btn-block" >标准宽按钮</ button > </ div > </ form > </ div > |
说明: BootStrap默认为按钮提供了btn-lg/btn-sm/btn-xs附加类,分别表示大/中/小按钮,主要差别就是padding/font-size/line-height/border-radius,但有时我们并不需要按钮拥有padding和margin,希望宽度100%,好在BootStrap还为我们提供了一个block级的样式btn-block,它不以文本多少自动伸缩,宽度由父容器决定.且多个btn-block之间还有5px的间隔.
# 活动状态
1 2 3 4 5 6 7 | < div class = "container" > < button class = "btn btn-default" >激活的button按钮</ button > < br > < a href = "" class = "btn btn-default active" >激活的a按钮</ a > < br > < a href = "" class = "btn btn-default disabled" >禁用的a按钮</ a > </ div > |
说明: BootStrap的btn相关的类,不仅支持普通button按钮,还支持a元素,也能显示同样的效果,但强烈建议使用button防止跨浏览器兼容问题,对于活动状态active其实就是background-image: none;outline: 0;而disabled其实就是opacity: 65%;并不禁止按钮的默认行为,需要JS代码来阻止,当然可通过disabled属性来一次性达到你想要的效果.
# 图像形状
1 2 3 4 5 6 7 | < div class = "row" > < div class = "col-sm-1" > < img src = "img/100.jpg" alt = "girl" class = "img-thumbnail" > < img src = "img/100.jpg" alt = "girl" class = "img-circle" > < img src = "img/100.jpg" alt = "girl" class = "img-rounded" > </ div > </ div > |
说明: BootStrap为图片默认提供了3个附加类img-rounded为圆角方形,img-circle为圆,img-thumbnail小型方块缩略图,但是都没有控制图片显示大小,所以需要额外应用样式或限制父元素大小来控制图片显示大小.
# 辅助样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | < div class = "container" > <!-- 文本字体颜色 --> < div class = "row" > < p class = "text-muted" >柔和灰</ p > < p class = "text-primary" >主要蓝</ p > < p class = "text-success" >成功绿</ p > < p class = "text-info" >信息蓝</ p > < p class = "text-warning" >警告黄</ p > < p class = "text-danger" >危险红</ p > </ div > <!-- 文本背景颜色 --> < div class = "row" > < p class = "bg-primary" >主要蓝</ p > < p class = "bg-success" >成功绿</ p > < p class = "bg-info" >信息蓝</ p > < p class = "bg-warning" >警告黄</ p > < p class = "bg-danger" >危险红</ p > </ div > <!-- 辅助图表 --> < div class = "row" > <!-- 关闭图标 --> < div class = "row" > < button class = "close" >×</ button > </ div > < div class = "row" > < a href = "javascript:;" class = "close" >×</ a > </ div > <!-- 下拉图标 --> < div class = "row" > < span class = "caret" ></ span > </ div > </ div > <!-- 内容浮动 --> < div class = "row" > < img src = "img/100.jpg" alt = "" class = "img-circle pull-left" > < img src = "img/100.jpg" alt = "" class = "img-circle pull-right" > < div class = "clearfix" ></ div > < img src = "img/100.jpg" alt = "" class = "img-circle center-block" > </ div > <!-- 显示隐藏 --> < div class = "row" > < p style = "border: solid 1px red;" class = "show" >显示</ p > < p style = "border: solid 1px red;" class = "invisible" >隐藏,但占据文档流</ p > < p style = "border: solid 1px red;" class = "hidden" >隐藏,但不占据文档流</ p > </ div > </ div > |
说明: BootStrap默认还提供了一些细小的辅助样式,文字颜色text-*类,文字背景颜色bg-*类,关闭图标close类,下拉图表caret类,左浮动pull-left类,右浮动pull-right类,清除浮动clearfix类,显示show类,隐藏hidden类和invisiable类,前者是隐藏并不占文档流,后者是隐藏但占据文档流.
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~