首页
所有分类
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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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
自定义函数(1) pytz(1) 内置函数(1) 分布式锁(3) commit(1) GoFrame(3) 短信验证码(1) procedure(1) Tablespace(1) harbor(1)
You might like
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PhpStorm 2020.3：新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
Bootstrap警告框（Alert）插件使用方法
2017/03/21 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
ionic3 懒加载
2017/08/16 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
python实现朴素贝叶斯分类器
2018/03/28 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python进程和线程用法知识点总结
2019/05/28 Python
python sorted函数的小练习及解答
2019/09/18 Python
伦敦剧院及景点门票：Encore Tickets
2018/07/01 全球购物
navabi英国：设计师大码女装
2019/06/25 全球购物
新西兰最大的连锁超市：Countdown
2020/06/04 全球购物
外贸业务员工作职责
2014/01/06 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
学校开学标语
2014/10/06 职场文书
人事局接收函
2015/01/31 职场文书
公司停电通知
2015/04/15 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
mysql 生成连续日期及变量赋值
2022/03/20 MySQL