首页
所有分类
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插件制作 图片走廊 gallery
Aug 17 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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) 暴雪(1) 战锤40K(1) LOL(1) 艾尔登法环(1) 最终幻想(1) 巫师(1) 东方异文石(1) 我的世界(1) 小缇娜的奇幻之地(1)
You might like
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
40款非常棒的jQuery 插件和制作教程（系列一）
2011/10/26 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JavaScript italics方法入门实例（把字符串显示为斜体）
2014/10/17 Javascript
Javascript闭包（Closure）详解
2015/05/05 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
微信小程序 网络请求（post请求，get请求）
2017/01/17 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
python append、extend与insert的区别
2016/10/13 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
下载python中Crypto库报错：ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Kate Spade澳大利亚官方网站：美国设计师手袋品牌
2019/09/10 全球购物
电影T恤、80年代T恤和80年代服装：TV Store Online
2020/01/05 全球购物
物业总经理助理岗位职责
2014/06/29 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书