首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 实现表格样式、表单布局的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

在代码的世界里游走

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
js有序数组的连接问题
Oct 01 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 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
Harman Kardon(1) 短波(8) 长波(3) 广播(8) KDKA(1) 中波(3) 保养(1) 电台频率(32) 立体声(1) 收音机(62)
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP中的use关键字概述
2014/07/23 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
django2 快速安装指南分享
2018/01/05 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
地球鞋加拿大官网：Earth Shoes Canada
2020/11/17 全球购物
信用社员工先进事迹材料
2014/02/04 职场文书
工地安全质量标语
2014/06/07 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
天那边观后感
2015/06/09 职场文书
失恋33天观后感
2015/06/11 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang