bootstrap
关注
分享
扫一扫
shelleyHLX
这个作者很懒，什么都没留下…
展开
-
selectpicker 使用简介附样例
最近开发中使用selectpicker下拉框选择国家及地区，以此为样例简单记录下使用方法。1、从数据库取值初始化下拉框内容。 html代码如下，multiple属性为多选。1 <select class="col-md-12 padding-none select" id="country" data-live-search="true" multiple >2 </select> 此处省略后台代码，将数据data返回到前台后，js处理如下：...转载 2021-08-12 14:49:54 · 723 阅读 · 0 评论 -
bootstrap suggest搜索建议插件
近日因工作需要看了下此插件。首先下载bootstrap js包。添加此插件的引用。注意css样式要引用，不能忘记。前台页面代码，因为楼主做的是选项卡切换查询不同的结果。<tr> <th style="background: #fff;" width="30%">类型：</th> <td width="70%"> <select class转载 2021-07-26 17:40:56 · 1233 阅读 · 0 评论 -
bootstrap的tab例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...原创 2021-07-15 17:17:58 · 529 阅读 · 0 评论 -
glyphicons-halflings-regular.woff2 net::ERR_ABORTED
使用bootstrap日历控件问题记录1、报错信息使用bootstrap日历控件，图片和箭头出不来，且js报错如下：http://localhost:8080/fonts/glyphicons-halflings-regular.woff2 net::ERR_ABORTED2、报错原因是：在bootstrap.min.css中有对如下字体文件的引用：@font-face{font-family:’Glyphicons Halflings’;src:url(../font...转载 2021-06-23 15:14:32 · 723 阅读 · 0 评论 -
Bootstrap 导航栏
例子，包含下拉菜单：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2021-06-14 21:21:04 · 332 阅读 · 0 评论 -
Bootstrap 输入框组
.input-group-append 前置的东西输入框不处理圆角，button才处理圆角输入框的中间控件不处理圆角原创 2021-06-14 17:50:39 · 180 阅读 · 0 评论 -
Bootstrap组件-按钮，按钮组
按钮可以button，也可以是adisplay: inline-block的使用：a<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width...原创 2021-06-14 17:08:46 · 233 阅读 · 0 评论 -
Bootstrap组件-下拉菜单
.btn-group：按钮组原创 2021-06-14 16:41:15 · 265 阅读 · 0 评论 -
bootstrap的模态框modal的hidden.bs.modal属性
这个问题是在春节大展活动上面遇到的问题，项目地址是：http://hd.tongji021.com/20170103/ 在抽奖的时候遇到的坑，非常感谢。hidden.bs.modal的意思就是当弹出的模态框消失的时候，接下来回调的函数$("#modal").on('hidden.bs.modal',function(){ alert(1); $( '#modal' ).off().on( 'hidden', 'hidden.bs.modal'); ...转载 2021-06-07 17:50:39 · 1625 阅读 · 0 评论 -
Bootstrap 模态框
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(...原创 2021-06-07 15:56:47 · 239 阅读 · 1 评论 -
bootstrap4和bootstrap3的区别
Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。下面本篇文章给大家介绍bootstrap4和bootstrap3的区别，希望对你们有所帮助。bootstrap4和bootstrap3的区别1、移动优先设置不同Bootstrap4:Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。下面本篇文章给大家介绍bootstrap4和bootstrap转载 2021-06-07 14:58:16 · 3233 阅读 · 0 评论 -
select2详解
官网：http://select2.github.io/select2/https://select2.org/单项选择默认情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".原创 2021-05-12 10:10:42 · 7905 阅读 · 1 评论 -
JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大，完全没有理由不去使用，但是国内很少能找到本插件完整的使用方法，于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅。另外附上一段调用方发和servlet端的接收代码，未完待续。引言：一个强化的HTML5 文件输入插件，适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览，并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式。通过对很转载 2021-05-07 11:27:57 · 2113 阅读 · 0 评论 -
JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言：之前的三篇介绍了下bootstrap table的一些常见用法，发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能，前端使用原始的input type='file'这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，还是被博主找到了这个组件：bootstrap fileinput。关于这个组件的简单应用，博客园大牛伍华聪写过一篇基于Metroni转载 2021-05-07 11:26:52 · 8238 阅读 · 0 评论 -
Uncaught Error: No select2/compat/inputData
select2报错:Uncaught Error: No select2/compat/inputData解决办法:把 select2.min.js 替换成 select2.full.min.js转载 2021-05-07 09:43:33 · 1209 阅读 · 0 评论 -
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
https://www.cnblogs.com/landeanfen/p/5821192.html转载 2021-05-06 19:14:45 · 267 阅读 · 0 评论 -
bootstrap-selectpicker
重点中文文档：https://www.bootstrapselect.cn/index.htmhttps://www.bootstrapselect.cn/options.html需要的包导入bootstrap-select后，需要导入bootstrap的css和js，导入bootstrap需要jquery和popper。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2021-05-05 17:53:20 · 3014 阅读 · 0 评论 -
前端引入Bootstrap-select菜单时报错
Uncaught TypeError: Bootstrap's dropdowns require Popper (https://popper.js.org)引入：<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>注：popper.js必须在bootstrap.js之前引用进来，否则也是报错的reference:https://blog...原创 2021-05-05 10:00:40 · 685 阅读 · 0 评论 -
bootstrap4 和之前版本相比有哪些变动或新特性？
作者：关中刀客在青岛链接：https://www.zhihu.com/question/293444132/answer/485693589来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。目录浏览器支持全局变化栅格系统组件按钮组重构排版图片表格表单按钮按钮组下拉菜单栅格系统列表组Modal导航导航栏分页面包屑标签和徽章面板，缩略图面板进度条轮放组件仪表盘公用样式转载 2021-05-04 14:39:00 · 893 阅读 · 0 评论 -
bootstrap selectpicker控件select下拉框动态数据无法回显的问题
有关于selectpicker下拉框数据回显的问题，当查看一个对象的属性的时候，发现有关于selectpicker的下拉框并没有将返回的数据进行回显，显示的都是请选择，经查证，当查看属性的时候，他会加载默认的数据，必须要刷新一下才可以将数据完全的回显出来。<select id='name' class="form-control selectpicker" data-live-search="true"> $.ajax({ // get请求地址 ..转载 2021-04-30 17:12:12 · 1485 阅读 · 1 评论 -
Bootstrap 下拉菜单（Dropdown）插件
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 带有下拉菜单的标签页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scr...原创 2021-04-23 11:35:56 · 800 阅读 · 0 评论 -
Bootstrap 模态框（Modal）插件
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> &l...原创 2021-04-23 10:54:33 · 202 阅读 · 0 评论 -
bootstrap 的按钮
样式的使用<button class="btn btn-primary btn-lg">abcd</button>基本样式 btn,比如设置padding：按钮里的边距 cursor,font-size，文字大小显示方式:display文字位置:text-align, line-height, vertical-aligin.btn { display: inline-block; padding: 6px 12px; margin-bottom.原创 2021-04-23 10:37:28 · 139 阅读 · 0 评论 -
Bootstrap 进度条
创建不同样式的进度条的步骤如下：添加一个带有 class.progress的 <div>。 接着，在上面的 <div> 内，添加一个带有 class.progress-bar和 classprogress-bar-*的空的 <div>。其中，* 可以是success、info、warning、danger。表示进度条的颜色 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。表示进度条的有颜...转载 2021-04-23 09:13:08 · 315 阅读 · 0 评论 -
bootstrap selectpicker 下拉框使用详解
最近一直在用bootstrap 的一些东西，写几篇博客记录下。。。。bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件，先看效果如下：附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. （官方示例好像出问题了，最近一直看不到）下拉框的使用上基本操作一般是：单选、多选、模糊搜索、动态赋值等，下面来看如何使用：1、首先需要引入的css和js：bootstrap.c...转载 2021-04-22 17:14:02 · 2914 阅读 · 0 评论