Bootstrap-table基础篇（小技巧整理）
data-*属性 在bootstrap中到处都有data-开头的属性使用，bootstrap-table中也一样，使用html渲染的table导出都使用到这种结构的属性命名，通俗的说HTML5的规范中约定以data-开头的属性为自定义属性，该属性名称不含有大写字母，所有的均为小写，单词之间使用“-”中横线分割；jQuery中提供了按此规范解析属性值的实现，且支持属性的（伪）匈牙利转驼峰，在html渲染元素的时候尤为有用，参考如下示例： <button id="hello" data-url="http://www.chendd.cn" data-user-name="chendd"></button> <script type="text/javascript"> alert($("#hello").data("url"));//不含中横线分割 alert($("#hello").data...
文章分类：前端技术 Bootstrap
小技巧BootstrapBootstrap-table基础篇（分页实现）
bootstrap-table支持基于客户端与服务端两种类型分页，当客户端分页时需要处理的数据为[]数组类型，总记录数则从该数组中的length属性中获取，至于分页的导航应该是结合bootstrap分页组件实现，由于是基于客户端分页，不涉及与后台交互，故使用起来比较简单。 相关分页属性：pagination、pageNumber、pageSize、pageList、sidePagination，注意pageList属性中如果想显示所有数据，它可支持[5,10,'All']的写法，具体参考如下。 client分页 server分页 bootstrap-table支持基于客户端与服务端两种类型分页，当服务端分页时需要特别注意，要么结合后台实现进行参数定制化处理，要么是基于bootstrap-table默认的实现进行调整，总之使用起来比较便捷。 bootstrap-table提供了两种的参数传递...
文章分类：前端技术 Bootstrap
BootstrapBootstrap-table基础篇（基于js构建表格）
bootstrap类的组件基本上都分为使用原生html渲染与JS渲染的方式，本篇文章将使用最简单的js代码实现一个基于bootstrap-table的运行效果案例，包含的功能点为：表格排序、表格工具栏、自定义图标、单选、点击行选中表格、点击某列不触发选中行、工具栏工具图标显示等，采用url的json请求实现仍然简单，具体参考如下。 运行结果 参考代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>From Js</title> <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="../../bootstrap.min.css" /> <li...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之table应用
table内容的显示则是网页中最常见到的效果之一了，Bootstrap-table是一个非常强大的表格插件实现，官网示例特别多和全，包含全部的在线运行示例，英文站点：https://bootstrap-table.com，中文站点：https://www.bootstrap-table.com.cn，示例非常全，建议看一遍中文站点，有一些了解之后直接使用英文站点。 关于bootstrap-table的整理的为个人使用到的知识点，整理出较为贴合实际使用的情况，采用当前最新版本v1.16.0，我开启了我的bootstrap-table之旅，详见后文。 bootstrap类的组件基本上都分为使用原生html渲染与JS渲染的方式，本篇文章将使用最简单的html代码实现一个基于bootstrap-table的运行效果案例，包含的功能点为：表格排序、表格工具栏、自定义图标、多选、点击行选中表格、点击某...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之自动补全插件
基本介绍 Autocomplete自动补全插件也算是会经常用到的吧，写起来比较简单，早年间也写过好多的吧，但近年来主要是使用bootstrap模板做页面，按照老规矩把使用到的bootstrap风格的自动补全插件整理出来，用过的不多也就是本文所述的typeahead插件。 一般使用Autocomplete的时候重点关注于以下几个方面： （1）是否支持Ajax请求（该类请求需要考虑每次键盘按下后触发重复加载的时间间隔）； （2）当数据库存在多条数据范围的时候，考虑最大显示个数（最好是由后端去控制最大显示个数）； （3）自定义下拉选项风格； （4）未找到匹配文本时的提示信息； （5）自定义格式的JSON数据结构转换； 带着上述的几点考虑，使用的Bootstrap3-typeahead版本的自动补全实现，GitHub项目地址为：https://github.com/bassjobsen/Boots...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之下拉框插件
关于bootstrap的下拉框插件我相信肯定有许多许多，个人使用到的仅限于bootstrap-select的插件，使用起来在有限的需求范围内都可以满足，奉上一些非常简单的介绍和示例。 官网地址为：https://www.bootstrapselect.cn，包含非常详细的参数说明和示例，本文简单的整理一下简单的入门demo，采用目前最新的bootstrap4.4.1的版本（下拉弹出菜单基于bts4的版本还需要依赖copper.js），不再过多描述，示例如下。 简单示例 参考代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap-select</title> <meta name="viewport" content="width=device-width, initial-scal...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之弹出框插件（二）
基本介绍 前一篇文章中我介绍了一些bootbox插件的基本使用，本篇文章主要是基于日常使用层面的封装调用，在一定层度上简化代码的调用。 如果你对bootbox有一些了解，也许你也会认为它的一些默认参数不是你期望的，除了修改源码外就是我们另行包装了，比如说我认为弹出框的头部与底部的间隔太大，同时它的弹出窗口大小的定义又无法精确到某像素，而且它的实现也不支持图标等等，基于这些短板吧，在其基础上另行封装，达到预期的调用简化、图标支持、大小间距合适等，所以一个bootbox支持图标、大小合适、调用简单的实现版本就在这里，独立页面运行地址为：“/demo/bootstrap/dialog/bootboxAdvanced.html”。 调用实现 （1）增加$.alert为全局弹框默认API，支持全部4个参数的调用； （2）扩展$.alert.success、$.alert.warn、$.alert.e...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之弹出框插件（一）
基本介绍 弹出框插件也是日常开发中最常用的插件之一，关于bootstrap的弹出框插件我也仅仅找到2个看起来不错的（不是资源太少，而是我见识太少），分别是bootbox与sweetalert，本文不对它俩的优劣做评价，对于后者仅限于单词拼写上，重点在于bootbox上。 bootbox是支持bootstrap各种新版本的实现（目前支持 V4.4.1），含有丰富的函数封装，包括alert、confirm、loading、dialog等多种应用场景，可支持弹出窗口参数的各种自定义，是本人较为喜欢的弹出插件，本文主要参考官网上的示例并结合自身使用经验总结分享而来，查看本文单页示例地址：“/demo/bootstrap/dialog/bootboxBasic.html”。 示例环境 jQuery v3.4.1 + Bootstrap v4.4.1 + Bootbox v5.4.0 + Prism ...
文章分类：前端技术 Bootstrap
BootstrapBootstrap实践之tab插件
背景介绍 博客2.0系统已经在龟速开发当中了，考虑到界面必须采用bootstrap风格了，然而众多的整套模板页面中基本没有一款是带有Tab面板布局的实现，绝大多数都是单页面的示例，但一般习惯上的后台管理页面需要采用tabs的方式，于是就开始了一轮的bootstrap-tabs插件的找寻，经过一段时间的查找，也算是看到了好多的bootstrap-tabs插件，最终找到三款个人觉得挺不错的分享出来，分别是：“nth-tab”、“multi-tabs”、“contabs.js”，根据这些名字的关键字去搜索，一定是可以搜到到最新的代码版本。 上述三个插件不讨论哪个最好，不讨论它们的区别，因为笔者并未对它们的源码有所了解，仅在看到示例后按个人喜好所进行的自我感觉选择，此处重点对于它们的示例做一个汇总，方面供大家选择。 nth-tab nth-tab是基于bootstrap3.3.5的版本，将下载的n...
文章分类：前端技术 Bootstrap
BootstrapBootstrap最佳实践之开篇
基本介绍 头次听到Bootstrap那还是2014年，记得是欢乐哥给介绍了一下，清楚的记得的是介绍了一下它的相关优质项目推荐，比如一个叫bsie的东西，然后就没有然后了。后面几年陆陆续续的有一些遇见吧，但是从来没有入手（一直看你们入手），我也就才去年的时间有个半年不到的时间使用了一些bootstrap的东西，现在将所使用到的组件以及对它的了解整理出示例来，在丰富自己的同时，也分享给大家，秉持利他之心为IT行业技术分享贡献出自己的一份力量。 允许我稍微夸大一下，前台的这些东西若不是追求实现原理与自身实现，站在使用者的角度，作为一个API调用者来说，它们都是很简单的，毕竟成为巨人很难很不可能，但是踩在巨人肩膀上还是比较容易的。既然这么容易，bootstrap这个知识点我真不太想整理的，但是还是耗费了我许多的业余时间来整理，我将围绕我所使用到的一个很小的范围进行分享，后续再有新的了解或使用到其它...
文章分类：前端技术 Bootstrap
Bootstrap运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：