Bootstrap初级学习(一)表单<form>

  • 垂直表单(默认)
  • 内联表单
  • 水平表单(常用 以此为例)

<form class="form-horizontal" role="form"> 
在父form中必须添加from-horizontal类
  <div class="form-group">
  (((((将所有标签和空间放在form-group的div里

  <label for="firstName" class="control-label col-sm-2">名字</label>
  (((((对于label内容,必须加入class="control-label",for表示这个label绑定哪个控件,与对应控件的id相同

     <div class="col-sm-10">
     <input type="text" class="form-control" id="firstName" placeholder="请输入名字">
     ((((将控件再放在一个div中,该div加入class="col-sm-xxx"
     ((((对于控件内容,必须加入class="form-control",控件id要与对应labelfor相同,placeholder表示控件内提示内容
     </div>
    ((((再另起一行写 性别 的时候又重复<div class="form-group"></div>内容
  </div>
</form>


  • 其他属性
    • class=”input-group-addon”
      为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。
    • class=”checkbox-inline ”
      将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。
    • class=”col-sm-offset-2”
      向右偏移col-sm-2
    • class=”btn”
      button类,包括btn-default 默认样式/ btn-danger 红色样式/ btn-info 蓝色样式 等
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值