首页
所有分类
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 getElementsByTagName的简写方式
Jun 27 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
pm2启动ssr失败的解决方法
Jun 29 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
DSP(2) 电子管(5) 矿石收音机(1) ETON(1) R601SW(1) E1-XM(1) S900(1) 沃尔沃(1) 放大器(1) 接收机(2)
You might like
Thinkphp中的volist标签用法简介
2014/06/18 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php post换行的方法
2020/02/03 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python网络应用开发知识点浅析
2019/05/28 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
计算机网络专业个人的自我评价
2013/10/17 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
大专毕业生求职信
2014/07/05 职场文书
住房抵押登记委托书
2014/09/27 职场文书
可怜妈妈观后感
2015/06/09 职场文书
警示教育片观后感
2015/06/17 职场文书
大学生创业计划书
2019/06/24 职场文书
Echarts如何重新渲染实例详解
2022/05/30 Javascript