学习使用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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
js中的数组对象排序分析
Dec 11 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
我的论坛源代码(三)
2006/10/09 PHP
php中define用法实例
2015/07/30 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python使用OpenCV进行标定
2018/05/08 Python
python基于http下载视频或音频
2018/06/20 Python
python实现内存监控系统
2021/03/07 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python自动登录QQ的实现示例
2020/08/28 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
护士演讲稿范文
2014/01/05 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
边城读书笔记
2015/06/29 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
七年级作文之英语老师
2019/10/28 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android