Bootstrap学习笔记系列3-------Bootstrap简单表单显示

时间  2019-11-16
标签 bootstrap 学习 笔记 系列 简单 表单 显示 栏目 Bootstarp 繁體版
原文   原文链接

表单布局

垂直或基本表单

基本的表单结构时BootStrap自带的，建立基本表单的步骤以下：css

  • 向父<form>元素添加role = “form”；
  • 为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下；
  • 向全部的文本元素<input>、<textarea>和<select>添加.form-control
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

      <form role="form">
         <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" id="name" name="name-text"  placeholder="请输入你的名称">
         </div>
      </form>

      <!-- jQuery (Bootstrap 的 JavaScript 插件须要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括全部已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

添加了form-controlClass的input会和label分为两行，而且得到焦点时会有蓝色的边框样式。html

内联表单

内联表单中全部的元素都是内联的，标签都是并排的jquery

  • 向<form>标签中添加classfrom-inline;
  • 每一个表单须要被包含在div.form-group，checkbox能够包含在div.checkbox,radio能够包含在div.radio;
  • 默认状况下，bootstrap中的input、select和textarea有100%宽度，使用内联表单时，能够设置表单控件的宽度来设置;
  • 对标签描述添加sr-only能够隐藏标签描述。
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

      <form class="form-inline" role="form">
         <div class="form-group">
            <label  class = "sr-only" for="name">名称</label>
            <input type="text" class="form-control" id="name" name="name-text"  placeholder="请输入你的名称" style="width: 170px">
         </div>
         <div class="form-group">
            <input type="file" name="inputfile" style="width: 170px">
         </div>
            <label>
            <input type="checkbox" class="checkbox">请打勾            
            </label>            
      </form>

      <!-- jQuery (Bootstrap 的 JavaScript 插件须要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括全部已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

水平表单

  • 向父<form>添加类form-horizontal;
  • 把标签和空间放在一个 div,form-group 的<div>中;
  • 向标签添加class control-label.
<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

      <!--父元素添加form-horizontal类-->
      <form class="form-horizontal" role="form">

         <!--标签和控件放在一个带有 class .form-group 的 <div> 中-->
         <div class="form-group">

            <!--向标签添加 class .control-label。-->
            <label for="username" class="col-sm-2 control-label">名字：</label>

            <!--控制表单的宽度-->
            <div class="col-sm-3">
               <input type="text" class="form-control" id="username"  placeholder="请输入用户名">
            </div>
         </div>

         <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-3">
            <input type="password" class="form-control" id="password" 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>
      
      <!-- jQuery (Bootstrap 的 JavaScript 插件须要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括全部已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

支持表单的控件

bootstrap支持常见的表单控件，主要是input，textarea,checkbox,radio和select。ios

输入框（input）

Bootstrap提供了对全部原生的HTML5的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、url、search、tel、color。bootstrap

文本框(Textarea)

须要进行多行的输入时，则可使用文本框textarea。必要时改变rows属性（较少的行 = 较少的盒子，较多的行 = 较多的盒子）。布局

复选框（Checkbox）和单选框（Radio）

  • 建立表单时，若是想让用户从列表中选择若干选项时，请使用checkbox。若是想限制用户只能选择一个选项，就使用radion
  • 对于一些列的复选框和单选框使用Checkbox-inline或radio-inlie，控制它们显示在同一行上。
<label class="checkbox-inline">
         <input type="radio" name="optionsRadiosinline" id="optionsRaios1" value="option1" >选项1
         </label>
         <label class="checkbox-inline">

<!--设置checked属性来表示默认被选中-->
         <input type="radio" name="optionsRadiosinline" id="optionsRaios2" value="option2" checked="">选项2
      </label>

选择框（select）

想让用户从多个选项中进行选择，可是默认的状况下只能选择一个选项时，则使用选择框url

  • 使用<select>展现列表选项
  • 使用multiple=“multiple”容许用户选择多个选项

静态控件

当在一个水平表单标签后放置纯文本时，在<p>上使用form-control-staticspa

表单控件状态

  • :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上）时，输入框的轮廓会被移除，同时应用box-shadow。
  • 禁用输入框input，要想禁用一个输入框input，只须要简单的添加disable属性，就会禁用输入框，还会改变输入框的样式和鼠标悬停的样式。
  • 禁用字段集fieldset，对<fieldset>添加disable属性来禁用<fieldset>内的全部控件。
  • 验证状态，对父元素
    简单的添加 has-waring， has-error， has-success便可使用验证状态。 
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">

      <!--经过对<input>标签简单的添加disbale属性，就能禁止该控件-->
      <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
    </div>
  </div>

  <!--对<fieldset>添加disabled属性禁用<fieldset>内的全部组件-->
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止选择</option>
        </select>
      </div>
    </div>
  </fieldset>

  <!--对父元素添加has-success类用于成功消息的验证样式-->
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>

  <!--对父元素添加has-warning类用于警告消息的验证样式-->
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>

  <!--对父元素添加has-error类用错误消息的验证样式-->
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">输入错误</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>
</form>

表单控件的大小

使用input-lg（lg能够替换成md、sm下同）和col-lg-*来设置表单的高度和宽度。插件

表单帮助文本

表单控件能够在输入框上有一个块级的帮助文本，为了添加一个占用整个宽度的内容快， 在input后使用help-block。code

<form role="form">
         <span>帮助文本实例</span>
         <input class="form-control" type="text">
         <p class="help-block">一个较长的文本，超过一行，须要扩展到下一行</p>
      </form>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程