你不得不知道的Bootstrap基础之表格、表单（2）

最新推荐文章于 2021-02-22 10:24:57 发布
最新推荐文章于 2021-02-22 10:24:57 发布
阅读量328 收藏 2
点赞数
分类专栏： 日常学习 文章标签： bootstrap table form
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41071754/article/details/108985157
版权

文章目录

1. Bootstrap表格

bootstrap表格
在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        caption{
            text-align: center;
        }
        table thead tr th{
            background-color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-hover table-bordered">
            <caption>基本的表格布局</caption>
            <thead>
                <tr>
                    <th class="danger">标题1</th>
                    <th class="warning">标题2</th>
                    <th class="active">标题3</th>
                    <th class="success">标题4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                    <td>单元格4</td>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                    <td>单元格4</td>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                    <td>单元格4</td>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                    <td>单元格4</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

效果图展示

在这里插入图片描述

2. Bootstrap表单

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        textarea{
            resize: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <form role="form">
                <div class="form-group">
                    <label class="sr-only">username</label>
                    <input type="text" class="form-control" placeholder="input username ...">
                </div>
            </form>
            <form role="form">
                <div class="form-group">
                    <label class="sr-only">password</label>
                    <input type="password" class="form-control" placeholder="input your password ...">
                </div>
            </form>
            <form role="form">
                <div class="form-group">
                    <label>date</label>
                    <input type="date" class="form-control">
                </div>
            </form>
            <form role="form">
                <div class="form-group">
                    <label>email</label>
                    <input type="email" class="form-control" placeholder="...@xx.com">
                </div>
            </form>
            <form role="form">
                <div class="form-group">
                    <label>color</label>
                    <input type="color" class="form-control">
                </div>
            </form>
            <form role="form">
                <div class="form-group">
                    <label>choose file</label>
                    <input type="file" class="form-control">
                </div>
            </form>
        </div>
    </div>
    <hr/>
    <div class="container">
        <form role="form" class="form-horizontal">
            <div class="form-group">
                <label class="sr-only">email</label>
                <input type="email" class="form-control" placeholder="input your email...">
            </div>
            <div class="form-group">
                <label class="sr-only">password</label>
                <input type="password" class="form-control" placeholder="input your password ...">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" checked>remember passwoed
                </label>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <input type="button" class="form-control btn btn-warning" value="login">
                </div>
            </div>

            <div class="form-group">
                <label>文本框</label>
                <textarea class="form-control" rows="3" ></textarea>
            </div>
        </form>
    </div>
    <hr/>
    <div class="container">
        <form role="form">
            <div class="form-group">
                <label>textarea</label>
                <textarea class="form-control" placeholder="input..." ></textarea>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="option1" name="">选项 1
                </label>
                <label>
                    <input type="checkbox"  value="option2"> 选项 2
                </label>
                <label>
                    <input type="checkbox"  value="option3"> 选项 3
                </label>
            </div>
        </form>

        <div class="radio">
            <label>
                <input name="sex" type="radio">男
            </label>
        </div>
        <div class="radio">
            <label>
                <input name="sex" type="radio" checked>女
            </label>
        </div>

        <select class="form-control" multiple="multiple">
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
        </select>

        <p class="form-control-static">这是静态的表单元素...</p>
    </div>

    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

效果图展示

在这里插入图片描述

TomLazy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[java swing]tame学习笔记一：table单元格合并
yeyinyue的专栏
01-20 3802
今天下载了关于java swing的一个开源项目包tame，不过由于完成年代久远（98年），很多类在新的jdk1.4或jdk1.5上已经会报错。例如AttributiveCellTableModel类的setDataVector方法便需要改为：  public void setDataVector(Vector newData, Vector columnNames)  {  super.
layui清空表单数据_Layui表格初始化
weixin_36127579的博客
12-23 4365
然后加载和初始化layui的table模块，elem指定原始表格元素选择器(推荐id选择器)，url是连接的数据接口。cols是表头的内容，field设定字段名，是表格数据列的唯一标识，字段名要和数据库表格里的字段名保持一致才能查出数据。title可以设置标题的名称，hide隐藏列true为隐藏，默认false。align 是对齐方式，center是居中对齐，可选左(left)对齐、右(right...
Word表格的拆分与合并(转)
cuemes08808的博客
06-02 1290
Word表格的拆分与合并(转)　一、表格的拆分 　　将光标插入要拆离部分的第一行（任何一个单元格中都可以），选择“表格”→“拆分表格”即可。 　　二、表格的合并 　　要分两种情况：打开“表格属性”对话框，看当前表格的文字...
java jtable 单元格合并_JTable中合并单元格.doc
weixin_33552230的博客
02-16 235
JTable中合并单元格/** SimpleTableDemo.java is a 1.4 application that requires no other files.*///编辑的时候直接从覆盖原有内容import javax.swing.JFrame;import javax.swing.JPanel;import javax.swing.JScrollPane;import javax...
excel拆分单元格内容_Excel 快捷键合集
weixin_39537397的博客
11-18 2511
点击上方“蓝字”关注，酷爽一夏好用的Excel快捷键最近发现好多小伙伴都在开始学习EXCEL，就此想把自己最近几年积累的资料分享给各位朋友，特此，首先整理了一下自己在EXCEL中常用的一些快捷键：01Ctrl合集Ctrl+C 复制Ctrl+V 粘贴Ctrl+X 剪贴Ctrl+A 全选Ctrl+...
实现累加求和_Excel教程：如何按条件累计求和？这个方法一学就会
weixin_32595533的博客
01-12 1万+
我们在工作中经常会用到Excel累加求和，可以看一下下面的案例，b列是当日营业额，需要在c列计算出累加营业额！比如7月2日的累加营业额就是：7月1日和7月2日的营业额之和。以此类推，如何按条件累计求和？下面这个方法一学就会！ excel累计求和，可以套用这样的格式：=SUM(开始单元格:结束单元格)。公式的核心就是单元格的绝对引用和相对引用的使用。SUM开始单元格为绝对引用，结束单元格为相对引用，...
Bootstrap（基础）
lixiaohong2012的博客
06-30 2278
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：<script src="https://oss.maxcdn
bootstrap-table 增删以及嵌套input与select下拉框
热门推荐
mrballjiang的博客
03-09 1万+
前言：项目需求写个表格带新增删除，看了下项目原本使用的是jq+bootstrap+layui的一个组合，我的页面基本是用layui完成的，layui也有自己的table组件，官方文档很详细，所以第一版的时候是用的layui，但是写到一半的时候出了问题，在以往的项目中通常新增是用弹窗的形式将要新增的内容写入，再push到table的data数组中，此次需求是在表格里每行带input以及下拉选项框，l...
基于bootstrap的select左右移动控件
winfzg的博客
05-29 6623
    不多说，直接放效果图。    因为也是头一次前端并且是头一次接触bootstrap，所以进行一次记录，在整个应用过程中遇到很多的坑，但是不得不说这个左右移的控件做的还是不错的，方别快捷直接成品。先放页面： 必须引用的js "/webapp/common/css/bootstrap.min.css" "/webapp/common/js...
Bootstrap学习笔记（五）菜单、按钮及导航
前端产品工程师
02-06 6396
下拉菜单（基本用法） 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：   ☑  LESS版本：对应的源码文件为 dropdowns.less   ☑  Sass版本：对应的源码文件为 _dropdowns.scss   ☑  编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第31
swing Table合并单元格
10-26
GridBagModel：抽象模型接口。该接口用于描述表格中单元格的合并状态。 DefaultGridBagTableModel：GridBagModel的默认实现。 GridBagTable：继承自JTable的控制器。通过该类中的方法控制表格单元的合并和拆分。 GridBagTableUI：GridBagTable对应的UI。 TODO：(已合并)行、列的插入，删除操作对应的GridBagModel的修改，不过已留接口。
swing 合并单元格的表格
03-13
swing 合并单元格，选择时，被合并的单元格会被作为一列选中。重写UI的方式。
bootstrap table复杂操作代码
01-19
本文实例为大家分享了bootstrap table复杂操作，如何生成外层表格，如何填充表格内容，供大家参考，具体内容如下 1、先生成外层表格： $('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:detailFormatter,//点击展开预先执行事件 cache: false, height: 550, showExport: true, exportDataType: all, pagin
Bootstrap树型表格和多标题表格
06-23
从bootstrap修改出来的与ext treegrid相似的插件，能当树形和普通多标题插件用，自带行内编辑
Java Swing写的支持合并单元格的JTable
D&L
08-18 607
N年前在网上参加了一个JavaSwing的招聘上机考试。招聘方要求开发一个类似EXCEL支持单元格合并的JTable。差不多用了5天的时间提交代码，最后被告知测试通过，我提出是否可做兼职，对方回复需要到上海做全职开发，最后也就放弃了。最近公司的一个项目中需要用到以前的代码，偶又重构了一次，设计思想来源于ListSelectionModel。   GridBagModel：抽象模型接口。...
word表格分开快捷键_Word拆分与合并单元格快捷键
weixin_31610297的博客
02-22 5375
在我们平时使用Word文档时，经常也会在文中插入单元格。而大家都知道，在Excel中，拆分与合并单元格都有快捷键，那么在Word中如何设置呢？下面我们就来学习一下。首先在Word文档中插入一个表格：点击左上角的【文件】选项，在下拉菜单中选择【选项】：在弹出的选项对话框中，点击【自定义功能区】，之后再点击右边下方的【自定义】：在自定义键盘对话框中，“类别”选择：表格工具选项卡，在“命令”一栏根据最下...
java jtable 添加表头_JTable的表头合并
weixin_29796905的博客
02-13 1560
JTableHeader的单个表头最复杂的操作也就是Renderer渲染和Editor编辑,然后增加事件处理和悬浮框提示,最多再加点特殊显示效果,这和JTable单元格的操作相同,在前面的例子里都已经讲过了,这里就剩下最后一个也是关于JTableHeader表头的操作了, 表头单元格的合并和拆分.JTableHeader的单个表头可编辑时可以把它看做一个JTextField,不可操作时可以看做一个...
bootstrap布局两列或者多列表单
weixin_30917213的博客
09-10 315
1, 代码如下: <div class="form-group"> <label for="starttime" class="col-sm-2 control-label">实际开始时间</label> ...
Bootstrap（二）——列表、表格、表单 20.3.19
under_heart的博客
03-19 488
1.Bootstrap列表 <body> <!--1.无序列表--> <ul> <li>a</li> <li>b</li> </ul> <!--2.有序列表--> <ol> <li>1</l...
Bootstrap实战：创建表格、表单与登录界面
"这篇资源主要介绍了如何使用Bootstrap框架创建简单的表格、表单和登录页面，适合初学者了解和学习Web前端开发。通过示例代码，展示了如何利用HTML、CSS（Bootstrap样式）和JavaScript来构建响应式的网页元素。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TomLazy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值