美文网首页
005--IDEA使用BootStrap表格

005--IDEA使用BootStrap表格

作者: 糖纸疯了 | 来源:发表于2020-02-03 23:22 被阅读0次

1、写在前面

项目中有时候需要使用一些简单的FORM表单或者其他页面,总是不能快速的进行生成,刚好好久没有劫持到前端的学习了,在此记录学习过程


2、核心操作


3、操作步骤

3.1、编写BootStrap 表格demo

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>

<table class="table table-striped table-bordered table-hover    ">
    <thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
    </tbody>
</table>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

相关文章

  • 005--IDEA使用BootStrap表格

    1、写在前面 项目中有时候需要使用一些简单的FORM表单或者其他页面,总是不能快速的进行生成,刚好好久没有劫持到前...

  • Bootstrap美化表格

    在引入Bootstrap样式之前,表格样式用CSS样式美化,代码很繁多也很不方便,然鹅,使用Bootstrap来美...

  • 你可能会用到的Bootstarp 库

    1. 表格 Bootstrap Table 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 ...

  • 2018-04-09

    1. 表格 Bootstrap Table 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 ...

  • bootstrap-table 小试牛刀

    因为修改项目,把bootstrap重新又拿起来做点东西。经典还是经典 做表格时候使用到大佬封装的bootstrap...

  • 我喜欢的页面插件

    BootStrap metisMenu (菜单树) bootstrap-table(表格) select2 (下拉...

  • Bootstrap - 排版4

    表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个...

  • 第二章 排版 2.18表格

    不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的 元素中一定不能...

  • bootstrap表格

    先来看一下表格的基本结构: 一、常用标签 1、table标签包含整个表格2、thead标签包含表格头部3、表格的每...

  • Bootstrap - 表格

    Bootstrap中的表格 示例: 表格居中对齐:http://blog.csdn.net/win_turn/ar...

网友评论

      本文标题:005--IDEA使用BootStrap表格

      本文链接:https://www.haomeiwen.com/subject/prrlxhtx.html