bootstrap 怎么制作表格

bootstrap 制作表格带有图文形式。主要知识点有以下几点

  1. 第一点肯定是写出一个普通的表格，这一点可以去菜鸟复制它的案例。添加tr和td就可以了
  2. 在表格放入图片加上class="img-circle" 变成圆形，自己写个css设置图片统一大小。图片高度50px,这时要设置行高也为50px。要不然文字不能垂直对齐，由于优先级问题，我们选择器不能直接选着tr标签，要不然没有作用，可以在父标签创建一个id，用后代选择器去选择。
  3. 操作下面的修改和删除按钮可以参照菜鸟的案例，要记得把bootstarp的font文件夹引用到自己的项目中。笔和垃圾桶不是图标是字体，要明白这一点，只需要在空的span加上class名称就可以了，他们都是字体图标，每个图标下都有相对应的class类名，我们直接复制类名就，可以了。
  4. 修改按钮弹出框在bootstarp有个叫模态框的可以把案例复制过来，修改一下h4的标题，和在modal-body的div添加我们的内容就可以了。
  5. 弹出框的表单可以复制菜鸟的表单案例，案例的输入框col-sm-10占用10列，我们可以修改成col-sm-9占用9列，这样输入框就不会很宽了。
  6. 我给图片加了个点击事件，当点击某张图片时，弹出框显示放大的图片。这里弹出框仍然可以用模态框，值不够特别注意的是当页面存在两个以上模态框时，要在每个模态框加个div标签，div也不需要写什么属性。然后就是修改模态框的id就是了这里id改成id="myModal2"。自己写的jQuery也是比较简单的，获取当前图片的src,然后赋值给模态框的图片的src。

复制代码时自己项目要有自己的bootstarp.css和font文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <style type="text/css">

            #a td{

                line-height: 50px;

                font-size: 20px;

            }

            img{

                height: 50px;

            }

            #a tr:hover{

                background:#D4E3E5;

            }

        </style>

    </head>

    <body>

        <div class="container" >

            <table class="table table-hover table-bordered">

                    <caption>边框表格布局</caption>

                    <thead>

                        <tr>

                            <th>编号</th>

                            <th>头像</th>

                            <th>昵称</th>

                            <th>年龄</th>

                            <th>性别</th>

                            <th>地址</th>

                            <th>时间</th>

                            <th>操作</th>

                        </tr>

                    </thead>

                    <tbody id="a">

                        <tr>

                            <td>01</td>

                            <td>

                                <img src="data:images/tou01.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2">

                            </td>

                            <td>Tanmay</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>

                                <button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal">

                                    <span class="glyphicon glyphicon-pencil"></span> 修改

                                </button>

                                <button type="button" class="btn btn-default btn-xm">

                                    <span class="glyphicon glyphicon-trash"></span> 删除

                                </button>

                            </td>

                        </tr>

                        <tr>

                            <td>02</td>

                            <td>

                                <img src="data:images/tou02.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"/>

                            </td>

                            <td>Sachin</td>

                            <td>Mumbai</td>

                            <td>400003</td>

                            <td>Bangalore</td>

                            <td>560001</td>

                            <td>

                                <button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal">

                                    <span class="glyphicon glyphicon-pencil"></span> 修改

                                </button>

                                <button type="button" class="btn btn-default btn-xm">

                                    <span class="glyphicon glyphicon-trash"></span> 删除

                                </button>

                            </td>

                        </tr>

                        <tr>

                            <td>03</td>

                            <td>

                                <img src="data:images/tou03.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"/>

                            </td>

                            <td>Uma</td>

                            <td>Pune</td>

                            <td>411027</td>

                            <td>Bangalore</td>

                            <td>Bangalore</td>

                            <td>

                                <button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal">

                                    <span class="glyphicon glyphicon-pencil"></span> 修改

                                </button>

                                <button type="button" class="btn btn-default btn-xm">

                                    <span class="glyphicon glyphicon-trash"></span> 删除

                                </button>

                            </td>

                        </tr>

                    </tbody>

            </table>

            <!--修改弹出框-->

            <div id="">

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                                &times;

                            </button>

                            <h4 class="modal-title" id="myModalLabel">

                                修改信息

                            </h4>

                        </div>

                        <div class="modal-body">

                            <form class="form-horizontal" role="form">

                            <div class="form-group">

                                <label for="firstname" class="col-sm-2 control-label">昵称</label>

                                <div class="col-sm-9">

                                    <input type="text" class="form-control" id="firstname"

                                           placeholder="请输入名字">

                                </div>

                            </div>

                            <div class="form-group">

                                <label for="old" class="col-sm-2 control-label">年龄</label>

                                <div class="col-sm-9">

                                    <input type="number" class="form-control" id="old"

                                           placeholder="请输入年龄">

                                </div>

                            </div>

                            <div class="form-group">

                                <label class="col-sm-2 control-label">性别</label>

                                <div class="col-sm-9">

                                    <label class="radio-inline">

                                        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 男

                                    </label>

                                    <label class="radio-inline">

                                        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 女

                                    </label>

                                </div>

                            </div>

                            <div class="form-group">

                                <label for="city" class="col-sm-2 control-label">所在城市</label>

                                <div class="col-sm-9">

                                    <select class="form-control">

                                        <option>信州区</option>

                                        <option>高新区</option>

                                        <option>广丰区</option>

                                        <option>婺源县</option>

                                        <option>铅山县</option>

                                    </select>

                                </div>

                            </div>

                            <div class="form-group">

                                <label for="timer" class="col-sm-2 control-label">时间</label>

                                <div class="col-sm-9">

                                    <input type="date" class="form-control" id="timer"

                                           placeholder="请输入时间">

                                </div>

                            </div>

                        </form>

                        </div>

                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                            </button>

                            <button type="button" class="btn btn-primary">

                                确认更改

                            </button>

                        </div>

                    </div>

                </div>

</div>

<!--图片-->

<div id="">

                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                    <div class="modal-dialog">

                        <div class="modal-content">

                            <div class="modal-header">

                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                                <h5 class="modal-title" id="myModalLabel">头像图片</h5>

                            </div>

                            <div class="modal-body"  style="height: 300px;text-align: center;">

                                <img src="data:images/tou01.jpg" style="height: 250px;" id="touimg"/>

                            </div>

                            <!--<div class="modal-footer">

                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                                <button type="button" class="btn btn-primary">提交更改</button>

                            </div>-->

                        </div>

                    </div>

                </div>

        </div>

        </div>

        <script type="text/javascript">

            $("img").click(function(){

                var at=$(this).attr("src")

                $("#touimg").attr("src",at)

            })

        </script>

    </body>

</html>

bootstrap 怎么制作好看的表格的更多相关文章

  1. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  2. Bootstrap入门（四）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  3. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  4. Bootstrap历练实例：带表格的面板

    带表格的面板 为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table.假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分 ...

  5. Css制作table细线表格

    制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...

  6. Bootstrap入门（2）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  7. 制作的excel表格如何放到微信公众号文章中？

    制作的excel表格如何放到微信公众号文章中? 我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件 ...

  8. UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...

  9. bootstrap table简洁扁平的表格

    使用方法 1.在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css. <link rel="stylesheet&qu ...

随机推荐

  1. vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比

    vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...

  2. tf.nn.bias_add 激活函数

    tf.nn.bias_add(value,bias,data_format=None,name=None) 参数: value:一个Tensor,类型为float,double,int64,int32 ...

  3. 如何初学python?资深程序员浅谈，教你学会入门python

    我认为python应该是现在市面上最简单,也是最值钱的一门编程语言,所以学习的人是越来越多,但是,如何初学python?这个问题困扰着很多初学python的人,今天,给大家简单聊聊这个话题. 我曾经也 ...

  4. 收集免费的接口服务,做一个api的搬运工

    hello, 大家好,今天给大家推荐的开源项目在某种程度上极大的方便了广大的开发者,这个开源项目统计了网上诸多的免费API,为广大开发者收集免费的接口服务,专心致志做一个API的搬运工,每月定时更新新 ...

  5. 安装python3.8和python2.7

    在同一台电脑上同时安装Python2和Python3 目前Python的两个版本Python2和Python3同时存在,且这两个版本同时在更新与维护. 到底是选择Python2还是选择Python3, ...

  6. JavaScript基础1228JavaScript:void(0)开始----

    JavaScript:void(0)含义 JavaScript:void(0)含义 我们经常会使用到JavaScript:void(0)这样的代码,那么在JavaScript中JavaScript:v ...

  7. [转载]利用分块传输绕过WAF进行SQL注入

    原理 客户端给服务器发送数据的时候,如果我们利用协议去制作payload,就可以绕过http协议的waf,实现SQL注入 分块传输编码(Chunked transfer encoding)是HTTP中 ...

  8. 简单了解下CAP定理与BASE定理

    分布式环境下的各种问题 通信异常 网络不可用风险高,消息丢失.消息延迟非常普遍 网络分区(脑裂)   网络发生异常情况,延迟增加,导致所有组成分布式系统的节点中,只有部分节点之间能够正常通信,而另一些 ...

  9. java第八周课后作业

    1.系统小练习 package homework; import java.util.Random; import java.util.Scanner; public class Menu { pub ...

  10. C# XML相关操作

    XML是一种意见单文本格式存储数据的方式,这意味着它可以被任何计算机读取.XML中完整的数据集就是XML文档. 在名称空间System.Xml下面大部分类型都是用来支持DOM处理模型的.其中很多类型配 ...