首页
所有分类
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 浏览器判断实现函数
Aug 20 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JS中substring与substr的用法
Nov 16 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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
appdata(1) Windows server 2003(1) XPathParser(1) minio(1) sentinel(1) 黑屏(2) ACID(1) mysqldump(1) sock(2) protocol(1)
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
angular中的cookie读写方法
2017/08/02 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Python字符串及文本模式方法详解
2020/09/10 Python
英国鞋类及配饰零售商：Kurt Geiger
2017/02/04 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
家教广告词
2014/03/19 职场文书
节水倡议书范文
2014/04/15 职场文书
商务日语专业自荐信
2014/04/17 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python