首页
所有分类
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 easyui的tabs使用时的问题
Mar 23 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
bootstrap制作jsp页面（根据值让table显示选中）
Jan 05 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
vue-router的两种模式的区别
May 30 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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
Android面试题(6) .NET面试题(131) 哈萨克斯坦购物网站(2) PHP面试题(54) 冰岛购物网站(1) DB面试题(126) 保加利亚购物网站(3) C++面试题(199) 网络工程师面试题(96) JAVA面试题(401)
You might like
php 字符转义 注意事项
2009/05/27 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP中echo和print的区别
2014/08/28 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
浅谈tensorflow1.0 池化层（pooling)和全连接层(dense)
2018/04/27 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
pycharm配置git(图文教程)
2019/08/16 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
python 基于opencv操作摄像头
2020/12/24 Python
Skyscanner阿联酋：全球领先的旅游搜索平台
2017/11/25 全球购物
照片礼物和装饰：MyPhoto
2019/11/02 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
名人演讲稿范文
2013/12/28 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
会计专业自我评价
2014/02/12 职场文书
2014年政教处工作总结
2014/12/20 职场文书
公司管理建议书
2015/09/14 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Java设计模式中的命令模式
2022/04/28 Java/Android