下载APP 编程狮,随时随地学编程
返回 首页

Bootstrap参考手册

Bootstrap 输入框组的使用

这里请避免使用 <select> 元素,因为 WebKit 浏览器不能完全绘制它的样式。

避免使用 <textarea> 元素,由于它们的 rows 属性在某些情况下不被支持。


将输入框组嵌套到表单组或栅格相关元素的内部。不要将表单组或栅格列(column)类直接和输入框组混合使用。

为 .input-group 赋予.input-group-addon 类
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

可以放radio,button等
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
输入框
目录
Bootstrap 简述
为什么选择 Bootstrap
如何使用 Bootstrap
常用的Bootstrap模板资源站
Bootstrap的基础标签

Bootstrap表格和列表

Bootstrap的基础表格
Bootstrap的斑马线
Bootstrap边框表格
Bootstrap的紧凑型表格
Bootstrap的响应式表格

Bootstrap列表

Bootstrap的有序列表和无序列表
Bootstrap的去点列表
Bootstrap的引用样式
Bootstrap自定义table列表
Bootstrap的水平定义列表

Bootstrap 表单元素

Bootstrap基础表单
Bootstrap 内联表单
Bootstrap 水平表单
Bootstrap 输入框组的使用
Bootstrap 下拉框
Bootstrap 文本域
bootstrap 多选框和单选框
Bootstrap 表单禁用
Bootstrap 表单效验状态
Bootstrap 下拉菜单之菜单状态
Bootstrap 下拉菜单之钮组的大小

Bootstrap 下拉菜单

Bootstrap 下拉菜单之分割线
Bootstrap 下拉菜单之菜单标题
Bootstrap 下拉菜单之对齐方式
Bootstrap 下拉菜单之按钮组
Bootstrap 下拉菜单之嵌套分组
Bootstrap 下拉菜单之垂直分组
Bootstrap 下拉菜单之等分按钮
Bootstrap 下拉菜单之按钮下拉菜单

使用Bootstrap栅格

Bootstrap 栅格系统(布局)
bootstrap 栅格系统案例

Bootstrap的定制

如何高效地定制你的bootstrap
下载Bootstrap源代码
Bootstrap定制工具集锦

关闭

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; }