bootstrap——css样式（四、表单）

最新推荐文章于 2024-05-19 13:56:53 发布

zaichuanguanshui

最新推荐文章于 2024-05-19 13:56:53 发布

阅读量2.4k

点赞数

分类专栏： web 文章标签： bootstrap css 表单

本文链接：https://blog.csdn.net/zaichuanguanshui/article/details/54601680

版权

web 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

1、表单基本用法

class	描述
.form-control	input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%;
.form-group	将 label 元素和控件包裹在一起，实现很好的排列

这里写图片描述

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

2、内联表单

为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。

这里写图片描述

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

3、水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

这里写图片描述

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

4、输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：
text、password、number、email、url、search、tel
datetime、datetime-local、date、month、time、week
color

<input type="text" class="form-control" placeholder="Text input">

5、文本域

<textarea class="form-control" rows="3"></textarea>

6、单选框

这里写图片描述

<div class="radio">
    <label>
        <input type="radio" checked/> 
        this one is checked
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"/>
        this one is can be checked
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" disabled/>
        this one is disabled
    </label>
</div>

7、多选框

这里写图片描述

<div class="checkbox">
    <label>
        <input type="checkbox" checked/> 
        this one is checked
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" />
        this one is can be checked
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled />
        this one is disabled
    </label>
</div>

8、内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

这里写图片描述

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

9、下拉列表

使用默认选项或添加 multiple 属性可以同时显示多个选项。

这里写图片描述


Copy
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

10、静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为

元素添加 .form-control-static 类即可。

这里写图片描述

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

11、被禁用的输入框

为输入框设置 disabled 属性可以防止用户输入，并能对外观做一些修改，使其更直观。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

12、被禁用的 fieldset

为fieldset设置 disabled 属性,可以禁用 fieldset 中包含的所有控件。

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

13、只读输入框

为输入框设置 readonly 属性可以禁止用户输入，并且输入框的样式也是禁用状态。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

14、添加额外的图标

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

图标、label 和输入控件组
对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。

这里写图片描述

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

<form class="form-horizontal" role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="inputSuccess3">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </div>
</form>

<form class="form-inline" role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess4">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess4">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</form>

15、控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

1）高度尺寸
.input-lg
.input-md
.input-sm
.input-xs

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

2）水平排列的表单组的尺寸

.form-group-lg
.form-group-md
.form-group-sm
.form-group-xs

<div class="form-group form-group-lg">
  <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
  <div class="col-sm-10">
    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
  </div>
</div>

16、辅助文本

<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

zaichuanguanshui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap——css样式（四、表单）

1、表单基本用法 class 描述 .form-control input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%; .form-group 将 label 元素和控件包裹在一起，实现很好的排列<form role="form"> <div class="form-group"> <label for="examp
复制链接

扫一扫

专栏目录