bootstrap之input-group&label样式
2017-11-07 23:55
375 查看
一、前言
现在开始介绍bootstrap的输入框组(input-group)和标签(label) 样式。二、源码
1、input-groups.less
1.1、input-groups.less源码// // Input groups // -------------------------------------------------- // Base styles // ------------------------- .input-group { position: relative; // For dropdowns display: table; border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table // Undo padding and float of grid classes &[class*="col-"] { float: none; padding-left: 0; padding-right: 0; } .form-control { // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; z-index: 2; // IE9 fubars the placeholder attribute in text inputs and the arrows on // select elements in input groups. To fix it, we float the input. Details: // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 float: left; width: 100%; margin-bottom: 0; &:focus { z-index: 3; } } } // Sizing options // // Remix the default form control sizing classes into new ones for easier // manipulation. .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { .input-lg(); } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { .input-sm(); } // Display as table-cell // ------------------------- .input-group-addon, .input-group-btn, .input-group .form-control { display: table-cell; &:not(:first-child):not(:last-child) { border-radius: 0; } } // Addon and addon wrapper for buttons .input-group-addon, .input-group-btn { width: 1%; white-space: nowrap; vertical-align: middle; // Match the inputs } // Text input groups // ------------------------- .input-group-addon { padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; font-weight: normal; line-height: 1; color: @input-color; text-align: center; background-color: @input-group-addon-bg; border: 1px solid @input-group-addon-border-color; border-radius: @input-border-radius; // Sizing &.input-sm { padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @input-border-radius-small; } &.input-lg { padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @input-border-radius-large; } // Nuke default margins from checkboxes and radios to vertically center within. input[type="radio"], input[type="checkbox"] { margin-top: 0; } } // Reset rounded corners .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { .border-right-radius(0); } .input-group-addon:first-child { border-right: 0; } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { .border-left-radius(0); } .input-group-addon:last-child { border-left: 0; } // Button input groups // ------------------------- .input-group-btn { position: relative; // Jankily prevent input button groups from wrapping with `white-space` and // `font-size` in combination with `inline-block` on buttons. font-size: 0; white-space: nowrap; // Negative margin for spacing, position for bringing hovered/focused/actived // element above the siblings. > .btn { position: relative; + .btn { margin-left: -1px; } // Bring the "active" button to the front &:hover, &:focus, &:active { z-index: 2; } } // Negative margin to only have a 1px border between the two &:first-child { > .btn, > .btn-group { margin-right: -1px; } } &:last-child { > .btn, > .btn-group { z-index: 2; margin-left: -1px; } } }
1.2、input-groups.less应用
<!--输入框组(使用 table 布局,使得 input 宽度为 100%)--> <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <div class="input-group input-group-sm"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <!--复选框--> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> <br> <!--单选框--> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div> <br> <!--按钮--> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <br> <!--带有下拉菜单的按钮--> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> </div> <br> <!--分割的下拉菜单按钮--> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">切换下拉菜单</span> </button> <ul class="dropdown-menu pull-right"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> </div> </form> </div>
2、labels.less
2.1、labels.less源码// // Labels(标签) // -------------------------------------------------- .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: @label-color; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; // Add hover effects, but only for links a& { &:hover, &:focus { color: @label-link-hover-color; text-decoration: none; cursor: pointer; } } // Empty labels collapse automatically (not available in IE8) &:empty { display: none; } // Quick fix for labels in buttons .btn & { position: relative; top: -1px; } } // Colors // Contextual variations (linked labels get darker on :hover) .label-default { .label-variant(@label-default-bg); } .label-primary { .label-variant(@label-primary-bg); } .label-success { .label-variant(@label-success-bg); } .label-info { .label-variant(@label-info-bg); } .label-warning { .label-variant(@label-warning-bg); } .label-danger { .label-variant(@label-danger-bg); }
2.2、labels.less应用
<span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="label label-info">信息标签</span> <span class="label label-warning">警告标签</span> <span class="label label-danger">危险标签</span>
相关文章推荐
- bootstrap之jumbotron&thumbnail&progressBar样式
- bootstrap之bootstrap&type样式
- bootstrap之media&close&well样式
- Bootstrap修改input file默认样式
- BootStrap中关于input-group的问题(未解决)
- 使用bootstrap默认样式,修改input=file的展现样式
- Bootstrap—输入框组input-group
- bootstrap之breadcrumb&panel样式
- 表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
- bootstrap之scaffolding&tables样式
- bootstrap 中 input输入框与其他样式的组合
- 有没有一种写法,可以分别定义全站input分别对应type="text",type="submit",type="chekbox"....等等的样式呢?
- Bootstrap 中列表行 <tr> 的显示样式
- <input>提交按钮样式(背景为图片…
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 通过label标签重置input[radio]样式
- 自定义 input type="file" 文件上传样式
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- <input type="file">定义样式并获取上传文件路径及指定文件类型
- playframework 2.4x 表单inputRadioGroup中label属性无效