Bootstrap 实现表格样式、表单布局的实例代码


Posted in Javascript onDecember 09, 2018

1. 表格的一些样式

Bootstrap 实现表格样式、表单布局的实例代码

举例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-striped">
 <caption>这是一个测试表格</caption>
 <thead>
  <tr>
   <th>姓名</th>
   <th>年龄</th>
   <th>地区</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>小胡子</td>
   <td>26</td>
   <td>陕西</td>
  </tr>
  <tr>
   <td>大胡子</td>
   <td>26</td>
   <td>北京</td>
  </tr>
  </tbody>
</table>
</body>
</html>

页面效果:

Bootstrap 实现表格样式、表单布局的实例代码

2. 表格行或单元格的样式

Bootstrap 实现表格样式、表单布局的实例代码

举例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-striped">
 <caption>这是一个测试表格</caption>
 <thead>
  <tr>
   <th>姓名</th>
   <th>年龄</th>
   <th>地区</th>
  </tr>
 </thead>
 <tbody>
  <tr class="info">
   <td>小胡子</td>
   <td>26</td>
   <td>陕西</td>
  </tr>
  <tr class="warning">
   <td>大胡子</td>
   <td>26</td>
   <td>北京</td>
  </tr>
  </tbody>
</table>
</body>
</html>

页面效果:

Bootstrap 实现表格样式、表单布局的实例代码

3. 表单布局

(1)垂直表单:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
 <div class="form-group">
  <label for="name">姓名</label>
  <input type="text" class="form-control" id="name" placeholder="请输入姓名">
 </div>
 <div class="form-group">
  <label for="inputfile">选择文件</label>
  <input type="file" id="inputfile">
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

效果:

Bootstrap 实现表格样式、表单布局的实例代码

(2)内联表单:它的所有元素是内联的,向左对齐的,标签是并排的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-inline">
 <div class="form-group">
  <label for="name">姓名</label>
  <input type="text" class="form-control" id="name" placeholder="请输入姓名">
 </div>
 <div class="form-group">
  <label for="inputfile">选择文件</label>
  <input type="file" id="inputfile">
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>

效果:

Bootstrap 实现表格样式、表单布局的实例代码

(3)水平表单:水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css"> 
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-horizontal">
 <div class="form-group">
    <label for="name" class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="请输入姓名">
    </div>
 </div>
 <div class="form-group">
    <label for="inputfile" class="col-sm-2 control-label">选择文件</label>
    <div class="col-sm-10">
      <input type="file" id="inputfile">
    <div>
 </div>
 <div class="form-group">
   <div class="col-sm-12">
    <button type="submit" class="btn btn-default">提交</button>
   </div>
 </div>
</form>
</body>
</html>

效果:

Bootstrap 实现表格样式、表单布局的实例代码

总结

以上所述是小编给大家介绍的Bootstrap 实现表格样式、表单布局的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 #Javascript
vue form check 表单验证的实现代码
Dec 09 #Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
You might like
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
python僵尸进程产生的原因
2017/07/21 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
护士自我介绍信
2014/01/13 职场文书
高二地理教学反思
2014/01/24 职场文书
回门宴父母答谢词
2014/01/26 职场文书
大四自我鉴定
2014/02/08 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
授权委托书格式
2014/07/31 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python