bootstrap
关注
分享
扫一扫
黄宝康
这个作者很懒，什么都没留下…
展开
-
bootstrap轮播广告demo
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <原创 2020-07-23 11:44:48 · 366 阅读 · 0 评论 -
bootstrap固定导航条模板
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css原创 2020-07-23 10:04:03 · 855 阅读 · 0 评论 -
bootstrap模态框及传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type="text/...原创 2020-04-24 17:36:57 · 864 阅读 · 0 评论 -
bootstrap面板panel
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type="text/...原创 2020-04-24 16:29:05 · 370 阅读 · 0 评论 -
bootstrap列表组list-group
示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...原创 2020-04-24 10:08:52 · 495 阅读 · 0 评论 -
bootstrap进度条
项目中经常使用进度条，通过js可以实现动态进度条效果。另外一个场景就是完成进度占比，如表格中的动态显示。示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="s...原创 2020-04-24 09:56:59 · 367 阅读 · 0 评论 -
bootstrap分页组件
示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...原创 2020-04-24 09:39:47 · 705 阅读 · 0 评论 -
bootstrap中的导航
示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type="...原创 2020-04-24 09:23:41 · 316 阅读 · 0 评论 -
bootstrap组件组input-group
示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...原创 2020-04-24 09:03:14 · 445 阅读 · 0 评论 -
bootstrap下拉框组件dropdown及获取元素值
示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type="...原创 2020-04-24 08:56:13 · 2585 阅读 · 0 评论 -
Bootstrap-table的封装
bootstrap-table-object.js/** * 初始化 BootStrap Table 的封装 * * 约定：toolbar的id为 (bstableId + "Toolbar") * * @author fengshuonan */(function () { var BSTable = function (bstableId, url, columns) ...原创 2019-10-10 16:59:48 · 1340 阅读 · 0 评论 -
Bootstrap下拉框事件
Bootstrap提供各种附加到下拉插件的事件，分别是：show.bs.dropdown：当手柄被点击时触发；或下拉手柄收到打开隐藏菜单的请求shown.bs.dropdown：在菜单显示后触发hide.bs.dropdown：在关闭菜单之前触发hidden.bs.dropdown：当菜单关闭时触发举例：$('a[data-toggle="tab"]').on( 'shown...原创 2019-10-10 14:20:46 · 1558 阅读 · 0 评论 -
bootstrap table伸缩树特效
function detailFormatter(index,row){ // 返回提交记录详情 console.log(row); var html=""; html+="<ul class='d-lists'>"; if(row.details.length>0){ for(var i=0;i<row.details.length;...原创 2019-09-25 09:13:45 · 921 阅读 · 0 评论 -
Bootstrap居中常用class
<!DOCTYPE html><html><head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.bo原创 2017-09-05 08:34:22 · 2517 阅读 · 0 评论 -
Bootstrap3 移动设备优先并使用了一些HTML5元素
HTML 5 文档类型（Doctype）Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。<!DOCTYPE html><html>....</html>如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype原创 2017-09-05 08:50:25 · 3218 阅读 · 0 评论 -
Bootstrap的aria-label和aria-labelledby
aria-label正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。<!DOCTYPE html><html lang="en"><head> <title>aria-label实例</title> <meta charset="utf-8"> <meta name="viewport"原创 2017-09-05 11:43:34 · 553 阅读 · 0 评论 -
BootstrapValidator超详细教程
废话不多说，直接开始一、引入必要文件下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/><link rel="stylesheet" href="/path/to/di原创 2017-08-24 11:12:56 · 3311 阅读 · 0 评论 -
bootstrap列表js
$(function() { load();});function load() { $('#exampleTable') .bootstrapTable( { method : 'get', // 服务器数据的请求方式 get or post原创 2017-09-21 11:27:35 · 692 阅读 · 0 评论 -
bootstrap批量代码生成js
function batchCode() { var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组 if (rows.length == 0) { layer.msg("请选择要生成代码的表"); return;原创 2017-09-21 11:55:13 · 822 阅读 · 0 评论 -
bootstrap-table分页记住勾选
var hbk_names = new Array();// 全局保存人员名字的数组 // 绑定选中事件、取消事件、全部选中、全部取消 $.btTable.on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) { // ...原创 2019-08-08 18:07:18 · 3161 阅读 · 0 评论 -
bootstrap徽章颜色
原创 2019-08-07 09:34:07 · 1176 阅读 · 0 评论 -
如何给bootstrap-table中表格前添加序号
最近由于项目需要，使用bootstrap-table做数据展示，其中要在第一列显示序号，如图所示：查看了API，发现bootstrap-table并没有像其他表格组件提供这个直接显示的功能（也有可能自己没有发现，如果有发现的伙伴们可以告诉我一下），但是可以根据options里面的pageSize，pageNumber自己进行计算，代码如下： columns: [{ ...转载 2019-09-20 14:29:13 · 1642 阅读 · 3 评论 -
BootStrap Table的JS封装
目前很多项目前台都使用bootstrap技术，初次接触时看了点网上的视频教程，深深地被它的样式所吸引，因为它是一个响应式的框架，可以根据浏览器的宽高自适应显示。 作为一名后台开发人员，bootstrap table分页的实现是后台必备的利器。以下是在guns框架的bootstrap-table-object.js文件中对bootstrap table的js封装。/** * 初始化原创 2017-07-12 09:26:22 · 5509 阅读 · 8 评论