学习使用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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
Vue数字输入框组件使用方法详解
Feb 10 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
初学CAKEPHP 基础教程
2009/11/02 PHP
简单的自定义php模板引擎
2016/08/26 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Django验证码的生成与使用示例
2017/05/20 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
学生鉴定评语大全
2014/05/05 职场文书
学术诚信承诺书
2014/05/26 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android