文档章节

Bootstrap学习3

ricardohn
 ricardohn
发布于 2016/04/04 11:51
字数 288
阅读 67
收藏 5

1、表单控件

水平表单:

<form  class="form-horizontal" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  </form>

内联表单:

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

输入框:

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

选择框:两种样式:下拉选择框或多行选择

<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>踢足球</option> 
        <option>游泳</option> 
        <option>慢跑</option> 
        <option>跳舞</option> 
      </select>
  </div>
</form>

复选框和单选按钮:可以设置水平排列

<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
    <label> <input type="checkbox" value=""> 记住密码 </label>
  </div>
  <div class="radio">
    <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢 </label>
  </div>
    <div class="radio">
    <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">不喜欢</label>
  </div> 
</form>


© 著作权归作者所有

上一篇: Bootstrap学习4
下一篇: Bootstrap学习2
ricardohn
粉丝 1
博文 76
码字总数 30236
作品 0
成都
私信 提问
Bootstrap 3 How-To #2 标题,链接与按钮

Bootstrap 3 How-To #2 标题,链接与按钮 这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书,但是,这本书的内容是基于以前版本的,与最新的 3.0 并不一致。 为了...

麦克风
2015/07/09
0
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
155
1
每周一书-《Bootstrap基础教程》

首先说明,本周活动有效时间为8月15日到21日。本周为大家送出的书是有电子工业出版,贺臣/陈鹏编著的《Bootsrap基础教程》,为前端入门必读书籍。 下面是从书中摘录的内容。 “ Bootstrap 讨...

zting科技
2017/01/11
0
0
《前台框架BootStrap学习》系列技术文章整理收藏

《前台框架BootStrap学习》系列技术文章整理收藏 前台框架BootStrap学习系列整理了关于前台框架BootStrap方面的技术文章,一些实用的BootStrap使用示例,供大家学习BootStrap时参考 1CSS——...

开元中国2015
2015/06/22
218
0
BootStrap学习总结

1.Bootstrap中文网(hhttp://www.bootcss.com/) 2.Bootstrap 教程(http://www.runoob.com/bootstrap/bootstrap-tutorial.html) 3.【前端框架之Bootstrap 02】布局与导航(http://www.cnblogs.c......

IT追寻者
2016/07/21
19
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
35分钟前
36
0
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
9
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部