学习使用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 调试利器 Firebug使用详解六
Jul 05 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
基本DOM节点操作
Jan 17 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
如何高效率去掉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
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php unlink()函数使用教程
2018/07/12 PHP
jQuery 位置插件
2008/12/25 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python中@property的理解和使用示例
2019/06/11 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python中内建模块collections如何使用
2020/05/27 Python
python如何安装下载后的模块
2020/07/03 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
上海中网科技笔试题
2012/02/19 面试题
委托公证书范本
2014/04/03 职场文书
扬尘污染防治方案
2014/06/15 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
库房管理员岗位职责
2015/02/12 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书