Bootstrap系列 -- 18. 表单控件大小

简介:   前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。

 

  前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,paddingfont-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

 

  1. input-sm:让控件比正常大小更小

  2. input-lg:让控件比正常大小更大

 

  这两个类适用于表单中的inputtextareaselect控件

 

<h1>案例1</h1>
<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大</label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
  </div>
  <div class="form-group">
    <label class="control-label">正常大小</label>
    <input class="form-control" type="text" placeholder="正常大小">
  </div>  
  <div class="form-group">
    <label class="control-label">控件变小</label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
</div> 

 

目录
打赏
0
0
0
0
5
分享
相关文章
Bootstrap表单
Bootstrap表单
N..
88 0
Bootstrap5 表单1
本章介绍如何使用 Bootstrap5 创建表单,包括堆叠和内联表单布局。表单元素如 `&lt;input&gt;`、`&lt;textarea&gt;` 和 `&lt;select&gt;` 使用 `.form-control` 类后宽度为 100%。示例展示了如何创建包含邮箱、密码输入框及复选框的堆叠表单,并使用 `.form-label` 确保标签有适当内边距。
Bootstrap5 表单3
使用 `&lt;textarea&gt;` 标签和 `.form-control` 类创建和调整大小的表单文本框示例,包括大、中、小三种尺寸的输入框。
Bootstrap5 表单4
介绍禁用/只读表单、纯文本输入及取色器的使用方法。通过设置 `disabled` 和 `readonly` 属性,可使输入框变为禁用或只读状态;使用 `.form-control-plaintext` 类可去除输入框边框,实现纯文本显示效果;添加 `.form-control-color` 类则可创建取色器。示例代码展示了具体应用。
Bootstrap5 表单2
内联表单示例:通过在表单中使用 `.row` 和 `.col` 类,可以使输入框等表单元素并排显示。此例展示了一个包含邮箱和密码输入框的内联表单。
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
49 0
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
460 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等