Bootstrap文档2
bootstrap-editable参数
bootstrap-editable参数
有两种方案可以设置bootstrap-editable参数：
1. 使用HTML data-* attribute方式设置参数：
通过在HTML元素中添加data-*属性来设置bootstrap-editable的参数。
例如，要设置编辑框的宽度为200px，可以在对应的HTML元素上添加data-width="200"属性。
具体的参数设置可以参考bootstrap-editable的官方文档。
2. 使用JavaScript方式设置参数：
通过JavaScript代码来动态设置bootstrap-editable的参数。
例如，要设置编辑框的显示模式为弹出框模式，可以使用以下代码：
```javascript
$('#yourElement').editable({
mode: 'popup'
});
```
其中，`#yourElement`是要应用bootstrap-editable的HTML元素的选择器，`mode`是要设置的参数名，`'popup'`是要设置的参数值。
同样，具体的参数设置可以参考bootstrap-editable的官方文档。
请注意，这里给出的是常见的设置方式，具体的参数和设置方法可能因使用的bootstrap-editable版本而有所差异，建议查阅官方文档来获取最准确的参数设置信息。
全局 CSS 样式 · Bootstrap 中文文档
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机
(&x)
中等屏幕 桌面显示
器 (≥992px)
大屏幕 大桌面显示器
(≥1200px)
栅格系统行为
总是水平排列
开始是堆叠在一起的，当大于这些阈值时将变为水平排列 C 750px 970px 1170px
2015/4/18
全局 CSS 样式 · Bootstrap 中文文档
全局 CSS 样式
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式 并得到增强效果；还有先进的栅格系统。
概览
深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮 的最佳实践。
Normalize.css
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css (http://necolas.github.io/normalize.css/)，这是由 Nicolas Gallagher (https:///necolas) 和 Jonathan Neal (https:///jon_neal) 维护的一个 CSS 重置样式库。
/css/ 5/81
2015/4/18
全局 CSS 样式 · Bootstrap 中文文档
.colmd6 .colmd6
<div class="row"> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> <div class="col‐md‐1">.col‐md‐1</div> </div> <div class="row"> <div class="col‐md‐8">.col‐md‐8</div> <div class="col‐md‐4">.col‐md‐4</div> </div> <div class="row"> <div class="col‐md‐4">.col‐md‐4</div> <div class="col‐md‐4">.col‐md‐4</div> <div class="col‐md‐4">.col‐md‐4</div> </div> <div class="row"> <div class="col‐md‐6">.col‐md‐6</div> <div class="col‐md‐6">.col‐md‐6</div> </div>
BootstrapFileInput中文API文档
BootstrapFileInput中⽂API⽂档Bootstrap FileInput中⽂API整理这段时间做项⽬⽤到bootstrap fileinput插件上传⽂件，在⽤的过程中，⽹上能查到的api都不是很全，所以想着整理⼀份⽐较详细的⽂档，⽅便⾃⼰今后使⽤，也希望能给⼤家带来帮助，如有错误，希望⼤家积极指正。
⼀、引⼊⽂件<link href="../css/bootstrap.min.css"rel="stylesheet"><link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" /><scriptsrc="../js/jquery-2.0.3.min.js"></script><script src="../js/fileinput.js"type="text/javascript"></script><script src="../js/bootstrap.min.js"type="text/javascript"></script>⼆、初始化设置：$("#uploadfile").fileinput({language: 'zh', //设置语⾔uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的⽂件后缀//uploadExtraData:{"id": 1, "fileName":'123.mp3'},uploadAsync: true, //默认异步上传showUpload:true, //是否显⽰上传按钮showRemove :true, //显⽰移除按钮showPreview :true, //是否显⽰预览showCaption:false,//是否显⽰标题browseClass:"btn btn-primary", //按钮样式dropZoneEnabled: false,//是否显⽰拖拽区域//minImageWidth: 50, //图⽚的最⼩宽度//minImageHeight: 50,//图⽚的最⼩⾼度//maxImageWidth: 1000,//图⽚的最⼤宽度//maxImageHeight: 1000,//图⽚的最⼤⾼度//maxFileSize:0,//单位为kb，如果为0表⽰不限制⽂件⼤⼩//minFileCount: 0,maxFileCount:10, //表⽰允许同时上传的最⼤⽂件个数enctype:'multipart/form-data',validateInitialCount:true,previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",msgFilesTooMany: "选择上传的⽂件数量({n}) 超过允许的最⼤数值{m}！",}).on("fileuploaded", function (event, data, previewId, index){});三、 Options 说明：属性名属性类型描述说明默认值language String 多语⾔设置，使⽤时需提前引⼊\locales⽂件夹'en'下对应的语⾔⽂件，中⽂zh，引⼊语⾔⽂件必须放在fileinput.js之后showCaption Boolean是否显⽰被选⽂件的简介trueshowBrowse Boolean是否显⽰浏览按钮trueshowPreview Boolean是否显⽰预览区域trueshowRemove Boolean是否显⽰移除按钮true,showUpload Boolean是否显⽰上传按钮true,showCancel Boolean是否显⽰取消按钮true,showClose:Boolean是否显⽰关闭按钮true showUploadedThumbs Boolean truebrowseOnZoneClick Boolean falseautoReplace Boolean是否⾃动替换当前图⽚，设置为true时，再次选false择⽂件，会将当前的⽂件替换掉。
BootstrapTable中文文档
BootstrapTable中⽂⽂档表格参数：名称标签类型默认描述-data-toggleString‘table’不⽤写 JavaScript 直接启⽤表格。
classes data-classesString‘table table-hover’表格的类名称。
默认情况下，表格是有边框的，你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。
sortClass data-sort-classString undefined被排序的td标签的class名height data-heightNumber undefined定义表格的⾼度。
undefinedText data-undefined-textString‘-‘当数据为 undefined 时显⽰的字符striped data-stripedBoolean false设置为 true 会有隔⾏变⾊效果sortName data-sort-nameString undefined定义排序列,通过url⽅式获取数据填写字段名，否则填写下标sortOrder data-sort-orderString‘asc’定义排序⽅式 ‘asc’ 或者 ‘desc’sortStable data-sort-stableBoolean false设置为 true 将获得稳定的排序，我们会添加_position属性到 row 数据中。
iconsPrefix data-icons-prefixString‘glyphicon’定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使⽤”fa”时需引⽤FontAwesome，并且配合 icons 属性实现效果Glyphicon 集成于Bootstrap可免费使⽤ 参考：FontAwesome 参考：icons data-icons Object {paginationSwitchDown:‘glyphicon-collapse-down icon-chevron-down’,paginationSwitchUp:‘glyphicon-collapse-up icon-chevron-up’,refresh: ‘glyphicon-refresh icon-refresh’toggle: ‘glyphicon-list-alt icon-list-alt’columns: ‘glyphicon-th icon-th’detailOpen:‘glyphicon-plus icon-plus’detailClose:‘glyphicon-minusicon-minus’}⾃定义图标columns-Array[]列配置项,详情请查看 列参数 表格.data-Array[]加载json格式的数据ajax data-ajax Function undefined⾃定义 AJAX ⽅法,须实现 jQuery AJAX APImethod data-methodString‘get’服务器数据的请求⽅式 ‘get’ or ‘post’url data-url String undefined服务器数据的加载地址cache data-cache Boolean true设置为 true 禁⽤ AJAX 数据缓存contentType data-content-typeString‘application/json’发送到服务器的数据编码类型dataType data-data-typeString‘json’服务器返回的数据类型typeajaxOptions data-ajax-optionsObject{}提交ajax请求时的附加参数，可⽤参数列请查看.queryParams data-query-paramsFunctionfunction(params) {return params;}请求服务器数据时，你可以通过重写参数的⽅式添加⼀些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = ‘limit’ ,返回参数必须包含limit, offset, search, sort, order 否则, 需要包含:pageSize, pageNumber, searchText, sortName, sortOrder.返回false将会终⽌请求queryParamsType data-query-params-typeString‘limit’设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.responseHandler data-response-handlerFunctionfunction(res) {return res;}加载服务器数据之前的处理程序，可以⽤来格式化数据。
bootstrap前端模板
bootstrap前端模板Bootstrap前端模板。
Bootstrap是一种流行的前端框架，它提供了一系列的HTML、CSS和JavaScript组件，可以帮助开发人员快速构建响应式网站和Web应用程序。
在本文档中，我们将介绍如何使用Bootstrap前端模板来创建一个现代化的网站。
首先，我们需要下载Bootstrap的最新版本。
我们可以从官方网站上下载Bootstrap，也可以使用包管理工具如npm或者yarn来安装。
一旦我们得到了Bootstrap的源代码，我们就可以开始构建我们的网站了。
在开始之前，我们需要创建一个HTML文件，并在文件头部引入Bootstrap的CSS和JavaScript文件。
这样我们就可以使用Bootstrap提供的样式和组件了。
接下来，我们可以使用Bootstrap提供的网格系统来布局我们的网站。
网格系统可以帮助我们快速地创建响应式布局，使我们的网站在不同大小的屏幕上都能够良好地显示。
除了网格系统，Bootstrap还提供了大量的组件，如导航栏、表单、按钮、模态框等。
我们可以利用这些组件来构建我们的网站，而不需要从头开始编写样式和JavaScript代码。
这不仅可以节省我们的时间，还可以确保我们的网站具有良好的用户体验。
另外，Bootstrap还提供了一些实用的JavaScript插件，如轮播、下拉菜单、模态框等。
这些插件可以帮助我们实现一些常见的交互效果，使我们的网站更加动态和吸引人。
除了自带的组件和插件，Bootstrap还有大量的主题和模板可以供我们使用。
这些主题和模板可以让我们的网站看起来更加专业和时尚，而且可以大大减少我们的设计时间和成本。
总之，Bootstrap是一个非常强大且灵活的前端框架，它可以帮助我们快速构建现代化的网站和Web应用程序。
通过本文档的介绍，相信大家已经对如何使用Bootstrap前端模板有了一定的了解，希望大家可以利用Bootstrap来打造出更加优秀的网站作品。
组件 · Bootstrap v3 中文文档
glyphicon glyphicon qrcode
glyphicon glyphicon barcode
glyphicon glyphicontag
glyphicon glyphicontags
glyphicon glyphiconbook
glyphicon glyphicon bookmark
glyphicon glyphicon circlearrowup
glyphicon glyphicon circlearrowdown
glyphicon glyphicon globe
glyphicon glyphicon wrench
glyphicon glyphicontasks
glyphicon glyphicon questionsign
glyphicon glyphiconinfo sign
glyphicon glyphicon screenshot
glyphicon glyphicon removecircle
glyphicon glyphiconok circle
glyphicon glyphicon folderopen
glyphicon glyphicon resizevertical
glyphicon glyphicon resizehorizontal
glyphicon glyphiconhdd
glyphicon glyphicon bullhorn
bootstrap treeselect 案例
概述随着前端开发技术的飞速发展，越来越多的优秀工具和框架被开发出来，为开发者们提供了更多的选择。
其中，bootstrap treeselect 是一个备受瞩目的框架，它在处理树形数据展示和选择方面具有独特的优势。
本文将对 bootstrap treeselect 的相关内容进行详细介绍和分析，帮助读者更好地了解和应用这一框架。
一、bootstrap treeselect 的基本概念bootstrap treeselect 是一个基于bootstrap 的树形下拉选择框组件，它可以用来展示树形数据并实现树形结构的数据选择。
该组件基于jquery和bootstrap构建而成，为开发者提供了一种简洁、美观的方式来展示树形数据，并允许用户在树形结构中进行选择操作。
二、bootstrap treeselect 的使用方法1. 引入相关文件要使用 bootstrap treeselect，首先需要引入相关的css和js文件。
可以通过CDN或下载文件到本地进行引入。
通过这样的方式，可以使用该框架提供的样式和脚本。
2. 定义页面结构在页面中，需要定义一个select标签，用于展示树形选择框。
另外，还需要定义一个用于存储相关数据的数据源。
数据源可以是一个静态的json对象，也可以是动态获取的数据。
3. 初始化 treeselect通过调用bootstrap treeselect提供的初始化方法，将select标签转化为树形选择框。
在初始化时，可以传入相关的参数来定制树形选择框的样式和行为。
4. 处理选择事件当用户在树形选择框中进行选择操作时，可以通过监听相关的选择事件来进行处理。
根据用户的选择，可以获取到相应的数据并进行后续的处理。
三、bootstrap treeselect 的特点和优势1. 灵活多样的样式定制bootstrap treeselect 提供了丰富的样式定制选项，开发者可以根据自己的需要来定制树形选择框的外观和行为，从而实现与应用的整体风格和需求相匹配。
bootstrap方面的文献
bootstrap方面的文献标题：Bootstrap：构建现代化网页设计的利器引言：在当今互联网时代，网页设计已成为企业推广、品牌塑造甚至个人展示的重要方式。
然而，要创建一个现代化、响应式的网页设计并不容易。
本文将介绍Bootstrap，这一强大的前端开发框架，它可以帮助开发人员快速搭建美观、灵活、易于维护的网页设计。
1. Bootstrap的概述Bootstrap是一个开源的前端开发框架，它提供了丰富的CSS和JavaScript组件，以及响应式的网格系统。
它的目标是让开发人员能够快速构建现代化的网页设计，而无需从头开始编写大量的代码。
Bootstrap的设计原则包括易用性、可定制性和响应式布局，使得它成为了众多网页设计师的首选工具。
2. Bootstrap的特点2.1 响应式布局：Bootstrap的网格系统能够根据设备的屏幕大小自动调整布局，使得网页在不同设备上都能够良好地展示。
这使得开发人员可以轻松创建适应手机、平板电脑和桌面电脑等多种终端的网页设计。
2.2 CSS组件：Bootstrap提供了丰富的CSS组件，例如按钮、导航、表单等，这些组件具有现代化的样式和交互效果，可以帮助开发人员快速构建功能丰富的网页设计。
2.3 JavaScript插件：除了CSS组件，Bootstrap还提供了众多的JavaScript插件，例如弹出框、轮播图、标签页等，这些插件能够增强网页的交互性和用户体验，使得网页更具吸引力。
3. Bootstrap的应用场景由于Bootstrap具有易用性和定制性，它被广泛应用于各种网页设计项目中。
以下是一些常见的应用场景：3.1 网页开发：无论是企业官网、电子商务网站还是个人博客，Bootstrap都能够提供丰富的组件和布局选项，帮助开发人员快速构建各种类型的网页设计。
3.2 响应式设计：随着移动设备的普及，响应式设计已成为网页设计的重要趋势。
Bootstrap的响应式网格系统和组件能够帮助开发人员轻松实现适应不同屏幕大小的网页设计。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
/ / 使用默认值初始化 / / 初始化。不支持键盘导航 / / 初始化并立即展示 < / p >
每个插件还通过 C o n s t r u c t o r属性暴露了其自身的构造器函数： $ . f n . p o p o v e r . C o n s t r u c t o r。如果你想获取某 个插件的实例，可以直接从页面元素内获取： $ ( ' [ r e l = p o p o v e r ] ' ) . d a t a ( ' p o p o v e r ' )。
/javascript/
4/40
2014年3月15日
JavaScript插件 · Bootstrap
EXAMPLE
Modal title
One fine body…
×
Close
Save changes
< d i vc l a s s = " m o d a lf a d e " > < d i vc l a s s = " m o d a l d i a l o g " > < d i vc l a s s = " m o d a l c o n t e n t " > < d i vc l a s s = " m o d a l h e a d e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " c l o s e "d a t a d i s m i s s = " m o d a l "a r i a h i d d e n = " t r u e " > & t i m e s ; < / b u t t o n > < h 4c l a s s = " m o d a l t i t l e " > M o d a lt i t l e < / h 4 > < / d i v > < d i vc l a s s = " m o d a l b o d y " > < p > O n ef i n eb o d y & h e l l i p ; < / p > < / d i v > < d i vc l a s s = " m o d a l f o o t e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " b t nb t n d e f a u l t "d a t a d i s m i s s = " m o d a l " > C l o s e < / b u t t o n > < b u t t o nt y p e = " b u t t o n "c l a s s = " b t nb t n p r i m a r y " > S a v ec h a n g e s < / b u t t o n > < / d i v > < / d i v > < ! -/ . m o d a l c o n t e n t> < / d i v > < ! -/ . m o d a l d i a l o g> < / d i v > < ! -/ . m o d a l>
不支持模态框重叠
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实 现。
对于移动设备的附加说明
本文档针对移动设备上使用模态框有一些附加说明。请参考浏览器支持 (../getting-started#mobilemodals)章节。
静态案例
以下模态框包含了模态框的头、体和一组在放置于底部的按钮。
避免冲突
某些时候可能需要将Bootstrap插件与其他UI框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果 不幸发生了这种情况，你可以通过调用插件的 . n o C o n f l i c t方法恢复原始值。
/javascript/
2/40
2014年3月15日
2014年3月15日
JavaScript插件 · Bootstrap
JavaScript插件
jQuery插件为Bootstrap的组件赋予了“生命”。可以简单地一次性引入所有插件，或者单个引入 到你的页面。
概览
单个还是全部引入
插件可以单个引入（使用Bootstrap提供的单个 * . j s文件），或一次性全部引入（使用 b o o t s t r a p . j s或压缩版 的b o o t s t r a p . m i n . j s）。
事件
Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词形 式，例如，不定式形式的动词（例如 s h o w n）表示其在事件开始时被触发；而过去式动词（例如 s h o w n）表示 其在动作直接完毕之后被触发。 从3.0.0开始，所有的Bootstrap事件都采用了命名空间。 所有以不定式形式的动词命名的事件都提供了 p r e v e n t D e f a u l t功能。这就赋予你在动作开始执行前将其停止的 能力。
JavaScript插件 · Bootstrap
v a rb o o t s t r a p B u t t o n=$ . f n . b u t t o n . n o C o n f l i c t ( )/ /r e t u r n$ . f n . b u t t o nt op r e v i o u s l ya s s i g n e d v a l u e $ . f n . b o o t s t r a p B t n=b o o t s t r a p B u t t o n / /g i v e$ ( ) . b o o t s t r a p B t nt h eB o o t s t r a pf u n c t i o n a l i t y
编程式API
我们还提供了所有Bootstrap插件的纯JavaScript API。所有公开的API都是支持单独或链式调用的，并且返回其 所操作的元素集合（注：和jQuery的调用形式一致）。
$ ( ' . b t n . d a n g e r ' ) . b u t t o n ( ' t o g g l e ' ) . a d d C l a s s ( ' f a t ' )
JavaScript插件 · Bootstrap
你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的 一等API，也应该是你的首选方式。 话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭data属性API的方式，即解除绑定 到文档命名空间上的所有事件 d a t a a p i。就像下面这样：
动态演示
点击下面的按钮即可通过JavaScript启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
EXAMPLE
Launch demo modal
/javascript/
5/40
2014年3月15日
JavaScript插件 · Bootstrap
< ! -B u t t o nt r i g g e rm o d a l> < b u t t o nc l a s s = " b t nb t n p r i m a r yb t n l g "d a t a t o g g l e = " m o d a l "d a t a t a r g e t = " # m y M o d a l " > L a u n c hd e m om o d a l < / b u t t o n > < ! -M o d a l> < d i vc l a s s = " m o d a lf a d e "i d = " m y M o d a l "t a b i n d e x = " 1 "r o l e = " d i a l o g "a r i a l a b e l l e d b y = " m y M o d a l L a b e l " a r i a h i d d e n = " t r u e " > < d i vc l a s s = " m o d a l d i a l o g " > < d i vc l a s s = " m o d a l c o n t e n t " > < d i vc l a s s = " m o d a l h e a d e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " c l o s e "d a t a d i s m i s s = " m o d a l "a r i a h i d d e n = " t r u e " > & t i m e s ; < / b u t t o n > < h 4c l a s s = " m o d a l t i t l e "i d = " m y M o d a l L a b e l " > M o d a lt i t l e < / h 4 > < / d i v > < d i vc l a s s = " m o d a l b o d y " > . . . < / d i v > < d i vc l a s s = " m o d a l f o o t e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " b t nb t n d e f a u l t "d a t a d i s m i s s = " m o d a l " > C l o s e < / b u t t o n > < b u t t o nt y p e = " b u t t o n "c l a s s = " b t nb t n p r i m a r y " > S a v ec h a n g e s < / b u t t o n > < / d i v > < / d i v > < ! -/ . m o d a l c o n t e n t> < / d i v > < ! -/ . m o d a l d i a l o g> < / d i v > < ! -/ . m o d a l>