Bootstarp学习教程（7）表单

基本案例：“form-control”修饰的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;表单控件包裹在".form-group"中可以获得最好的排列

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
    <!--容器  -->
    <div class="container">
        <div class="row">
           <div class="col-md-4">
            <form class="form">
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label> <input
                        type="text" class="form-control" id="exampleInputEmail1"
                        placeholder="请在此输入用户名">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label> <input
                        type="password" class="form-control" id="exampleInputPassword1"
                        placeholder="请在此输入密码">
                </div>

                <div class="checkbox">
                    <label> <input type="checkbox"> 是否记住用户名和密码 </label>
                </div>
                <button type="submit" class="btn btn-default">登入</button>
            </form>
            </div>
        </div>
    </div>
</body>
</html>

内联表单:"form-inline"可使其内容左对齐并且表现为inline-block级别的控件。只适用于浏览器窗口至少在 768px 宽度时

注意：需要设置宽度

在Bootstrap中，input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。

一定要设置label

如果你没有为每个输入控件设置label，屏幕阅读器将无法正确识读。对于这些内联表单，你可以通过为label设置.sr-only已将其隐藏。

<div class="row">
            <div class="col-md-6">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail2">邮箱
                            </label> <input type="email" class="form-control"
                            id="exampleInputEmail2" placeholder="在此输入邮箱地址">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">密码</label>
                        <input type="password" class="form-control"
                            id="exampleInputPassword2" placeholder="在此输入密码">
                    </div>
                    <div class="checkbox">
                        <label> <input type="checkbox"> 是否记住 </label>
                    </div>
                    <button type="submit" class="btn btn-default">登入</button>
                </form>
            </div>
        </div>

水平排列的表单:表单添加"form-horizontal"，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变"form-group"的行为，使其表现为栅格系统中的行（row），因此就无需再使用"row"了。

<form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="inputEmail3"
                        placeholder="在此输入用户名">
                </div>
            </div>

            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="inputPassword3"
                        placeholder="在此输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label> <input type="checkbox"> 是否保留 </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登入</button>
                </div>
            </div>
        </form>

被支持的控件:在表单布局案例中展示了其所支持的标准表单控件

Input:大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。(只有正确设置了type的input控件才能被赋予正确的样式。)

Textarea:支持多行文本的表单控件。可根据需要改变rows属性。

Checkbox 和 radio:Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。

内联checkboxes：通过将“checkbox-inline” 或 “radio-inline”应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行

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

(4)静态控件:在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static即可。

<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <p class="form-control-static">[email protected]</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form>

(5)控件状态:通过为控件和label设置一些基本状态，可以为用户提供回馈。

输入焦点:表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式.

被禁用的输入框:为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观.

被禁用的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>

校验状态:Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
</div>

(6)控件尺寸:通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

.input-lg

Default select

.input-sm

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

调整列尺寸

用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

原文链接

时间： 2024-11-05 08:48:11

Bootstarp学习教程（7）表单

高度尺寸

调整列尺寸