当前位置:首页 > 编程教程 > javascript技术文章 > Bootstrap 实现表格样式、表单布局的实例代码

详解Bootstrap 表格样式、表单布局

  • 发布时间:
  • 作者:码农之家
  • 点击:60

这篇文章主要知识点是关于bootstrap、表格样式、表单布局、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

移动网页设计与开发:HTML5+CSS3+JavaScript
  • 类型:移动开发大小:30.2 MB格式:PDF作者:Peter Gasston
立即下载

Bootstrap 实现表格样式、表单布局的实例代码

 

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 实现表格样式、表单布局的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.500330

BootStrap Select清除选中的状态恢复默认状态

PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件; 当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢? 如【图1】 当我们选择摸一个条件之后 如【图2】 此时点击重置按钮要将【图2】的状态回到【图1】,我们会使用很多方法,比如: $("#loc_province_search").attr("lang",'0');//将下拉列表属性lang置为初始值 $("#loc_city_search").attr("lang",'0');//将下拉列表属性lang置为初始值 $("#loc_town_search").attr("lang",'0');//将下拉列表属性lang置为初始值 $(".txt_classification").attr("lang",'0');//将下拉列表属性lang置为初始值 $(".txt_industry").attr("lang",'0');//将下拉列表属性lang置为初始值 $(".txt_segmentation").attr("lang",'0');//将下拉列表属性lang置为初始值 $(".customer_busi_status2").attr("lang",'0');//将下拉列表属性lang置为初始值 $("#searchkey").attr("lang",'0');//将……

网友NO.944621

使用Bootstrap4 + Vue2实现分页查询的示例代码

写在前面 工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。 前端框架:Bootstrap4,Vue.js2 后台框架:spring boot,spring data JPA 开发工具:IntelliJ IDEA,Maven 实现效果: 会员信息 如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕,本文主题开始。 一、使用Bootstrap搭建表格 表格区 div class="row" table class="table table-hover table-striped table-bordered table-sm" thead class="" tr thinput type="checkbox"/th th序号/th th会员号/th th姓名/th th手机号/th th办公电话/th th邮箱地址/th th状态/th /tr /thead tbody tr v-for="(user,index) in userList" tdinput type="checkbox" :value="index" v-model="checkedRows"/td td{{pageNow*10 + index+1}}/td td{{user.id}}/td td{{user.username}}/td td{{user.……

网友NO.222748

基于vue+ bootstrap实现图片上传图片展示功能

效果图如下所示: html ............-- key=idPicUrl -- div class="col-sm-7" img :src="queryFirmInfo[key]" alt="" class="myimage" :name="key" //div form id="fileForm" enctype="multipart/form-data" class="form-horizontal " div class="col-sm-5 " input class="form-control" type="file" name="file" @change="handleFileChange" ref="inputer" /div/form vue data: { queryFirmInfo:{ idPicUrl:"" ...... } } //选择改变图片 handleFileChange(e){ var vm=this; let file = e.target.files[0]; let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png']; if (file supportedTypes.indexOf(file.type) = 0) { baseFileAjax(new FormData($( "#fileForm" )[0]),function(result){ if(result.ret==0){ //提交成功后 //将图片上传到后台,得到后台图片的路径。 vm.queryFirmInfo["idPicUrl"]=result.url; $("#dForm").formValidation('revalidateField', "idPicUrl"); }else{ layer.msg("修改图片失败!") } }) } else { layer.alert('文件格式只支持:jpg、jpeg 和 png'); } }, /** * @method ……

网友NO.220244

Bootstrap标签页(Tab)插件使用方法

您可以通过以下两种方式启用标签页: 1、通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。 ul class="nav nav-tabs" lia href="#identifier" rel="external nofollow" data-toggle="tab"Home/a/li ... /ul 2、通过 JavaScript:您可以使用 Javscript 来启用标签页,如下所示: $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')}) 3、如果需要为标签页设置淡入淡出效果,请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类,以便淡入显示初始内容 div class="tab-content" div class="tab-pane fade in active" id="home".../div div class="tab-pane fade" id="svn".../div div class="tab-pane fade" id="ios".../div div class="tab-pane fade" id="java".../div/div html代码 body div class="containe……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com