美文网首页
第三章 表单 3-4 表单控件

第三章 表单 3-4 表单控件

作者: Murrey_Xiao | 来源:发表于2016-07-15 08:12 被阅读11次

    1、输入框input
    bootstrap通过对input标签的type属性进行识别,得到相应的格式,所以input标签一定要对type进行指定。另外,还需通过form-control对输入框进行规范统一,此外,可以用placeholder对框内内容进行初始化。

    <form role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
        <input type="text" class="form-control" placeholder="Enter userName">
      </div>
    </form> 
    

    2、下拉选择框
    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如:

    <form role="form">      //表单格式
    <div class="form-group">      //类:控件群
      <select class="form-control">    //每个控件都需要(表单-控制)类
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      </div>
      <div class="form-group">  
      <select multiple class="form-control">    //多行选择multiple
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    </form>
    

    3、文本域(textarea)
    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%auto

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

    相关文章

      网友评论

          本文标题:第三章 表单 3-4 表单控件

          本文链接:https://www.haomeiwen.com/subject/vekyjttx.html