学习使用bootstrap基本控件(table、form、button)


Posted in Javascript onApril 12, 2016

bootstrap为我们定义了简洁易用的样式,我们只需要很少的样式指定,就可以完成简约优雅的页面展示。
本篇主要介绍以下几个基本控件:
1. table
2. form
3. button

1. 表格(table)依旧使用<table><thead><tbody><tr><th><td>来表现表格。有如下的类来控制table的属性, table样式默认会占满父容器

学习使用bootstrap基本控件(table、form、button)

<div class="container">
 <div class="row">
  <div class="col-md-8 col-md-offset-2">
  <table class="table table-bordered table-striped table-hover">
  <tr>
  <th>标题一</th>
  <th>标题二</th>
  <th>标题三</th>
  </tr>
  <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  </tr>
  <tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  </tr>
 </table>
  </div>
 </div>
 </div>

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大768px宽度时,水平滚动条消失。

2. 表单form, 有如个几种样式定义

学习使用bootstrap基本控件(table、form、button)

lable与控件要用form-group类型的div包起来,默认表单如下

<div class="container">
 <form>
  <div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email">
  </div>
  <div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control"
   id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
 </form>
 </div>

内联表单,为label指定sr-only类别,可隐藏掉标签,但必须 不可省略lable.

<div class="container">
 <form class="form-inline">
  <div class="form-group">
  <label for="exampleInputEmail1" class="sr-only">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email">
  </div>
  <div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control"
   id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
 </form>
 </div>

水平类型的表单,要为lable与标签组指定长度, 采用栅格系统的布局方式。 label右对齐,标签组左对齐。  

<div class="container">
 <form class="form-horizontal">
  <div class="form-group">
   <label for="exampleInputEmail1" class="col-md-2 control-label">Email
   address</label>
  <div class="col-md-8">
   <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email">
  </div>
  </div>
  <div class="form-group" >
   <label for="exampleInputPassword1" class="col-md-2 control-label">Password</label>
  <div class="col-md-8">
   <input type="password" class="form-control"
   id="exampleInputPassword1" placeholder="Password">
  </div>
  </div>
  <div class="checkbox col-md-offset-2">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
 </form>
 </div>

form表单验证,bootstrap3支持表单的自定义验证。 加入req    uired表示表单必填,node.setCustomValidity可以设置表单的自定义验证

<div class="container">
 <form class="form-horizontal">
  <div class="form-group">
  <label for="exampleInputEmail1" class="col-md-2 control-label">Email
   address</label>
  <div class="col-md-8">
   <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email" required>
  </div>
  </div>
  <div class="form-group">
  <label for="password1" class="col-md-2 control-label">Password</label>
  <div class="col-md-8">
   <input type="password" class="form-control"
   id="password1" placeholder="Password" required onchange="checkPassword()">
  </div>
  </div>
<div class="form-group">
  <label for="password2" class="col-md-2 control-label" onchange="checkPassword()"> Password2</label>
  <div class="col-md-8">
   <input type="password" class="form-control"
   id="password2" placeholder="Password2" required>
  </div>
  </div>
  <div class="checkbox col-md-offset-2">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
 </form>
 </div>
 
 <script>
 function checkPassword() {
  var pwd1 = $("#password1").val();
  var pwd2 = $("#password2").val();
  if (pwd1 != pwd2) {
  document.getElementById("password1").setCustomValidity("两次输入的密码不一致");
  } else {
  document.getElementById("password1").setCustomValidity("");
  }
  
 }
 </script>

3. button的样式

学习使用bootstrap基本控件(table、form、button)

使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮, 给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素, <a>、<button>或<input>元素添加按钮class。 

<div class="container">
 <button type="button" class="btn btn-default btn-block">Default</button>
 <button type="button" class="btn btn-primary btn-block">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">链接</button>
 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">
 </div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
如何高效率去掉js数组中的重复项
Apr 12 #Javascript
学习使用bootstrap3栅格系统
Apr 12 #Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 #Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 #Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 #Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 #Javascript
jquery中实现时间戳与日期相互转换
Apr 12 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python中的错误处理
2016/04/10 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
大学生就业意向书
2015/05/11 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
检讨书怎么写?
2019/06/21 职场文书
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android