学习使用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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
json传值以及ajax接收详解
May 24 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
如何高效率去掉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
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
python根据日期返回星期几的方法
2015/07/06 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
优秀的茶餐厅创业计划书
2014/01/03 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
环卫工作个人总结
2015/03/04 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS