首页
所有分类
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 相关文章推荐
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
Node.js+Express配置入门教程
May 19 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
详解angular2 控制视图的封装模式
Dec 27 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
Tomcat(18) 速龙(1) 排名(1) 窗口函数(3) win11(40) ipad(1) win10(43) 分析统计(1) redis shake(1) i5 10400(1)
You might like
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP 以POST方式提交XML、获取XML，解析XML详解及实例
2016/10/26 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
vue filters的使用详解
2018/06/11 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
微信小程序：数据存储、传值、取值详解
2019/05/07 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
CentOS6.5设置Django开发环境
2016/10/13 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
使用Scrapy爬取动态数据
2018/10/21 Python
django+mysql的使用示例
2018/11/23 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
巴西香水和化妆品购物网站：The Beauty Box
2019/09/03 全球购物
《故乡》教学反思
2014/04/10 职场文书
片区教研活动总结
2014/07/02 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
技术入股协议书
2016/03/22 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Python3接口性能测试实例代码
2021/06/20 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js
Win11如何设置右键单击显示所有选项？Win11右键单击显示所有选项设置教程
2022/04/08 数码科技