首页
所有分类
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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
浅谈React之状态(State)
Sep 19 Javascript
移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐
Apr 02 Javascript
js获取图片的base64编码并压缩
Dec 05 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
Debian(1) 华为(1) 鸿蒙3.0(1) 虚拟键盘(1) 蓝牙(1) xhunter1.sys(1) 蓝牙耳机(1) HarmonyOS(1) 鸿蒙(2) RustDesk(1)
You might like
php之字符串变相相减的代码
2007/03/19 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php如何连接sql server
2015/10/16 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
Laravel 队列使用的实现
2019/01/08 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
微信小程序搜索功能(附：小程序前端+PHP后端)
2019/02/28 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
Kipling意大利官网：世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
信息技术课后反思
2014/04/27 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
推广活动策划方案
2014/08/23 职场文书
公司会议开幕词
2015/01/29 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers