Bootstrap学习(二)表单2:表单控件

输入框input

单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[ type=“?”](其中?号代表type类型,比如说text类型,对应的是input[ type=“text”])的形式来定义样式的。

<input type="text" class="form-control" placeholder="请输入用户名">

下拉选择框select

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"> 
        <option>1</option> 
        <option>2</option> 
        <option>4</option> 
        <option>5</option> 
      </select>
  </div>

</form>   

文本域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>

复选框checkbox和单选择按钮radio

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。

<form role="form">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div  class="radio">
    <input type="radio"  name="optionsRadios" id="optionsRadios1" value="love"  checked>
    喜欢
  </div>
  <div class="radio">  
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
</form>
复选框checkbox和单选择按钮radio
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,941评论 3 184
  • 表单控件 文本域:与原始文本域使用方式相同,可以通过rows定义高度,设置cols定义宽度。但如果在文本域中添加了...
    子非鱼666阅读 696评论 0 2
  • 从小妈妈带我去旅行,不喜欢坐车,晕车,记得去山水之间的村庄,住着长长的火炕,好似可以住几十个人并排,记着走在林间,...
    潼乐阅读 459评论 0 0
  • 习惯打卡这个软件,对于有严重拖延症的我有很强的督促作用。 因为你设置目标的时候,必须得设计一个目标挑战金额,若目标...
    羊小女阅读 363评论 0 0
  • 短视频除了有平台与平台之间的竞争,还是UGC与PGC的较量,短视频相对图文所承载的信息量大,且用户观看所花的时间成...
    独孤船长阅读 7,531评论 0 4