codecamp

Bootstrap基础表单

Bootstrap对基础表单未做太多的定制化效果设计,默认都使用全局设置,只是对表单内的fieldset、legend、label标签进行了设定,将这些元素的margin、padding、border等进行了细化设置。详细请参考源码1854行以后的代码。

Bootstrap

如果在select、input、textarea元素上应用了.form-control样式,显示的宽度会变成100%,并且placeholder的颜色都设置成了#999999。主要源码如下:
// 源码1689行
.form-control {
  display: block;
  width: 100%;    /* 设置宽度是100% */
  /* 省略部分设置 */
  border: 1px solid #ccc;  /* 边框设置 */
  border-radius: 4px;   /* 圆角设置*/
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;   /* 作用域得到焦点时的边框颜色*/
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
      233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,
              233, .6);
}
.form-control:-moz-placeholder {  color: #999;
      /* placeholder的文本颜色:moz浏览器*/}
.form-control::-moz-placeholder {  color: #999;
    /* placeholder的文本颜色:moz浏览器*/  opacity: 1;}
.form-control:-ms-input-placeholder {  color: #999;
      /* placeholder的文本颜色:IE浏览器*/}
.form-control::-webkit-input-placeholder {  color: #999;
      /* placeholder的文本颜色:webkit浏览器*/}


使用方式如下:
    <form>
       <fieldset>
         <legend>用户登录</legend>
         <div class="form-group">
             <label>登录账户</label>
             <input type="email" class="form-control" placeholder="请输入你
                 的用户名或Email">
         </div>
         <div class="form-group">
             <label>密码</label>
             <input type="text" class="form-control" placeholder="请输入你的密码">
         </div>
         <div class="checkbox">
             <label><input type="checkbox">记住密码</label>
         </div>
         <button type="submit" class="btn btn-default">登录</button>
       </fieldset>
    </form>

Bootstrap表单
Bootstrap的水平定义列表
Bootstrap 内联表单
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }