JavaSE typeScript 数据结构 远程桌面登陆 element Netty Android开发 自动化部署 存量客户 image powershell loops uwp uiviewcontroller jvm jaxb vue实例 后台模板 河南普通话考试报名官网 idea中svn的使用 docker查看所有容器 python中sort函数 python实例教程 搭建java环境 java集合框架 java运行环境配置 java函数式接口 java获取当前年 网站后台模板 groupby js数组删除指定元素 相关软件 整站系统 模拟人生2夜生活 assist是什么意思 ansys安装教程 爱奇艺无法投屏 淘宝图片下载 草图大师版本转换器 逗号的作用
当前位置: 首页 > 学习教程  > 

Bootstrap 表单控件的尺寸

2020/10/16 17:43:30 文章标签: bootstrap文本框

在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸。 1、让控件成为块级元素 如果想让控件像块级元素一样占满容器,就可以为它添加 .input-block-level 类。这…

在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸。

1、让控件成为块级元素

如果想让控件像块级元素一样占满容器,就可以为它添加 .input-block-level 类。这样,控件不仅可以占满容器,还可以根据浏览器窗口自动调整尺寸。如:


  1. <input class="input-block-level" type="text" placeholder=".input-block-level">

效果如图 3‑43所示:

Bootstrap表单控件成为块级元素图3-43 Bootstrap表单控件成为块级元素

2、使用相对尺寸

Bootstrap提供了 5 个相对尺寸的类,来设置控件的尺寸。按从小到大的顺序依次为:input-mini、input-small、input-medium、.input-large、input-xlarge、input-xxlarge。如:


  1. <input class="input-mini" type="text" placeholder=".input-mini">
  2. <input class="input-small" type="text" placeholder=".input-small">
  3. <input class="input-medium" type="text" placeholder=".input-medium">
  4. <input class="input-large" type="text" placeholder=".input-large">
  5. <input class="input-xlarge" type="text" placeholder=".input-xlarge">
  6. <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

效果如图 3‑44所示:

Bootstrap表单控件使用相对尺寸图3-44 Bootstrap表单控件使用相对尺寸

3、使用网格尺寸

也可以使用 .span1 到 .span12,来基于网格设置控件大小。如:


  1. <input class="span1" type="text" placeholder=".span1">
  2. <input class="span2" type="text" placeholder=".span2">
  3. <input class="span3" type="text" placeholder=".span3">
  4. <select class="span1">
  5.   ...
  6. </select>
  7. <select class="span2">
  8.   ...
  9. </select>
  10. <select class="span3">
  11.   ...
  12. </select>

效果如图 3‑45所示:

Bootstrap表单控件使用网格尺寸图3-45 Bootstrap表单控件使用网格尺寸

如果想让多个输入控件处在同一行,就可以添加 .controls-row 类。这样,Bootstrap 就会浮动控件,为控件添加适当的间距,并像 .row 类一样清除浮动。如:


  1. <form>
  2.   <div class="controls">
  3.     <input class="span5" type="text" placeholder=".span5">
  4.   </div>
  5.   <div class="controls controls-row">
  6.     <input class="span4" type="text" placeholder=".span4">
  7.     <input class="span1" type="text" placeholder=".span1">
  8.   </div>
  9.   <div class="controls controls-row">
  10.     <input class="span3" type="text" placeholder=".span3">
  11.     <input class="span2" type="text" placeholder=".span2">
  12.   </div>
  13.   <div class="controls controls-row">
  14.     <input class="span2" type="text" placeholder=".span2">
  15.     <input class="span3" type="text" placeholder=".span3">
  16.   </div>
  17.   <div class="controls controls-row">
  18.     <input class="span1" type="text" placeholder=".span1">
  19.     <input class="span4" type="text" placeholder=".span4">
  20.   </div>
  21. </form>    

效果如图 3‑46所示:

Bootstrap表单控件在一行内显示图3-46 Bootstrap表单控件在一行内显示

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。


本文链接: http://www.dtmao.cc/news_show_300048.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?