一、Glyphicons字体图标
1、使用
(1)图标和文本之间要加空格
(2)不要和其他组件混合使用,要创建一个嵌套的<span>标签,将图标类用到它上面
(3)只对内容为空的元素起作用
(3)改变图标字体文件的位置: . . /fonts/
如果修改位置,应在Less源码文件中修改@icon-font-path和/或@icon-font-name变量
利用Less编译器提供的相对URL地址选项
修改预编译CSS文件中的url()地址
2、例子
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
二、下拉菜单
1、例子:将下拉菜单触发器和下拉菜单都包在.dropdown里
2、对齐
右对齐:为.dropdown-menu添加.dropdown-menu-right。不建议用.pull-right类。
导航条中需要,用.pull-right的mixin版本。
3、标题:<li class="dropdown-header"></li>标明一组动作
4、分割线:<li role="presentation" class="divider"></li>
5、禁用的菜单项:<li role="presentation" class="disabled"></li>
三、按钮组
为.btn-group中的元素应用工具提示或弹出框时,须指定container:'body'选项
1、基本实例
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
2、按钮工具栏
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
3、尺寸:<div class="btn-group btn-group-lg/md/sm/xs">…</div>
4、嵌套:把.btn-group放入另一个.btn-group中
5、垂直排列:包在<div class="btn-group-vertical"></div>中
6、两端对齐排列的按钮组
(1)<a>元素:将.btn元素包在<div class="btn-group btn-group-justified"></div>中
(2)<button>元素:将每个按钮包进一个按钮组中
四、按钮式下拉菜单
将任意一个按钮放在.btn-group中,然后加入适当的菜单标签
1、单按钮下拉菜单
<div class=" btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"></button>
</div>
2、分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-danger"></button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"></button>
</div>
3、尺寸
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown"></button>
</div>
4、向上弹出式菜单:给父元素加 .dropup类
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
</div>
五、输入框组
在<input>前/后加文字或按钮实现扩展,为.input-group赋予 .input-group-addon类即可添加额外元素
工具提示和弹出卡U那个需要特别设置:container:'body' 参数
不要和其他组件混用
1、基本实例
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username" />
<span class="input-group-addon">.00</span>
</div>
2、尺寸:为 .input-group添加相应尺寸类,内部元素自动调整尺寸
<div class="input-group input-group-lg"></div>
3、作为额外元素的多选框和单选框
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox/radio" />
</span>
<input type="text" class="form-control" />
</div>
4、作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套,不是 .input-group-addon,而是添加 .input-group-btn, 包裹按钮元素
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">按钮</button>
</span>
<input type="text" class="form-control" />
</div>
5、作为额外元素的按钮式下拉菜单
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
"Action"
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</div>
6、作为额外元素的分裂式按钮下拉菜单
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex='-1'></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex='-1'>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>…</li>
</ul>
</div>
</div>
六、导航 .nav
1、标签页
(1).nav-tabs依赖 .nav类
(2)<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">profile</a></li>
<li role="presentation"><a href="#">profile</a></li>
</ul>
(3)需要用标签页的javaScript插件
2、胶囊式标签页
(1)其他同上,但是使用.nav-pills类
(2)也可以垂直方向:添加 .nav-stacked类-------<div class="nav nav-pills nav-stacked"></div>
3、两端对齐的标签页
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">
<a href="#">Home</a>
</li>
</ul>
4、禁用的链接----链接功能不受影响----
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
5、添加下拉菜单
用一点额外html代码并加入下拉菜单插件的JavaScript插件
带下拉菜单的胶囊式标签页:
<ul class="nav navpills" role="tablist">
<li role=presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
七、导航条
1、默认样式的导航条
内容折行怎么办?
(1)减少元素宽度、在某些尺寸的屏幕上隐藏一些元素
(2)JavaScript
(3)修改视口的阈值:@grid-float-breakpoint 比它大时水平排列,比它小时折叠排列
2、Brand image
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
3、表单
将表单放置在.nav-form中
<form class="nav-form nav-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search" />
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
4、按钮
在<form>外的<button>加上.navbar-btn,可让它在导航条垂直居中
<button type="button" class="btn btn-default navbar-btn">按钮</button>
5、文本
把文本包裹在.navbar-text中时,常用<p>标签
<p class="navbar-text"></p>
6、非导航的链接
使用.navbar-link类:<p class="navbar-left navbar-right">段落内容<a href="#" class="navbar-link">链接</a></p>
7、组件排列
通过添加.navbar-left和.navbar-right类让导航链接、表单、按钮或文本对齐。
导航条不支持多个.navbar-right类
8、固定在顶部------- .navbar-fixed-top
还可包含一个.container或.container-fluid容器,从而让导航条居中,并在两侧添加padding
<nav class="navbar navbar-default navabar-fixed-top" role="navigator">
<div class="container">
</div>
</nav>
需要为body元素设置padding
9、固定在底部------ .navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
</div>
</nav>
10、静止在顶部----- .navbar-static-top
添加.navbar-static-top类,即可创建一个与页面等宽的导航条,随页面向下滚动而消失。
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
</div>
</nav>
11、反色的导航条----- .navbar-inverse
<nav class="navbar navbar-inverse" role="navigation"></nav>
八、路径导航
在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过css的:before和content属性添加了。
九、分页
1、默认分页
<nav>
<ul class="pagination pagination-lg/sm">
<li><a href="#">«</a></li>
<li class="disabled"><a href="#">1</a></li> //此处的a也可换成<span>标签,可以保持需要的样式并移除点击功能
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
2、翻页
<nav>
<ul c;ass="pager">
<li class="previous disabled"><a href="#">previous</a></li>
<li class="next"><a href="#">next</a></li>
</ul>
</nav>
十、标签
<span class="label label-default/primary/success/info/warning/danger" /></span>
如果标签数量多,就要为每个标签设置为display:inline-block;
十一、徽章
给链接、导航等元素嵌套<span class="badge">元素。如果没有未读信息,徽章组件自动隐藏(IE8除外)
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">
<a href="#">Home<span class="badge">12</span></a>
</li>
<li role="presentation">
<a href="#">Home</a>
</li>
<li role="presentation">
<a href="#">Home<span class="badge">3</span></a>
</li>
</ul>
十二、巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果要让巨幕组件和浏览器同宽且无圆角,请把此组件放在所有.container外,且在组件里添加一个.container元素。
<div class="jumbottron">
<div class="container"></div>
</div>
十三、页头----page-header
为h1标签增加适当空间,并支持h1标签内嵌small元素的默认效果和大部分其他组件
<div class="page-header">
<h1>标题<small>小标题</small></h1>
</div>
十四、缩略图
1、默认样式
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="…" />
</a>
</div>
…
</div>
2、自定义内容------添加额外标签,可加入任何类型的html内容
<div class="row">
<div class="col-sm-6 col-md-4">
<img data-src="holder.js/300x300" alt="…" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>
<a href="#" class="btn btn-primary" role="button">按钮</a>
<a href="#" class="btn btn-default" role="button">按钮2</a>
</p>
</div>
</div>
</div>
十五、警告框
1、例子
.alert类是必须设置的,另外还有.alert-success/info/warnimg/danger四个类,没有默认类
<div class="alert alert-success" role="alert">…</div>
2、可关闭的警告框------- .alert-dismissible
如果提供该功能,要用jQuery警告框插件
务必给<button>添加data-dismiss="alert"属性
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">内容</span>
<span class="sr-only">关闭</span>
</button>
<strong>Warning!</strong>
Better check yourself, you're not looking too good.
</div>
3、警告框中的链接------.alert-link
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">. . . </a>
</div>
十六、进度条
IE9及以下不支持
1、基本实例
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}
<span class="sr-only">60% complete</span>
</div>
2、带提示标签的
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}
</div>
3、进度值较低的情况----min-width:20px;
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:2%;">
2%
</div>
</div>
4、根据情景变化效果-----progress-bar-success/info/warning/danger
<div class="progress">
<div class="progress-bar progress-bar-success/info/warnimg/danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
<span class="sr-only">20% complete</span>
</div>
</div>
5、条纹效果(IE8不支持)-----progress-bar-striped
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40% complete</span>
</div>
</div>
6、动画效果---- .active
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40%</span>
</div>
</div>
7、堆叠效果
<div class="progress">
<div class="progress-bar progress-bar-success" style="35%">
<span class="sr-only">35 complete</span>
</div>
<div class="progress-bar progress-bar-success" style="20%">
<span class="sr-only">20 complete</span>
</div>
<div class="progress-bar progress-bar-success" style="10%">
<span class="sr-only">10 complete</span>
</div>
</div>
十七、媒体对象
1、默认
允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)
<div class="media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
2、媒体对象列表
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
.media-right应在.media-body后面
用一点额外标记,就能在列表内使用媒体对象组件(对评论或文章列表很有用)。
十八、列表组
1、基本实例
<ul class="list-group">
<li class="list-group-item">内容</li>
</ul>
2、徽章
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
3、链接
分别用div代替ul,用a代替li
<div class="list-group">
<a href="#" class="list-group-item active">内容</a>
<a href="#" class="list-group-item">内容</a>
<a href="#" class="list-group-item">内容</a>
</div>
4、被禁用的条目
<div class="list-group">
<a href="#" class="list-group-item disabled">内容</a>
</div>
5、情境类
<ul class="list-group">
<li class="list-group-item list-group-item-success/info/warning/danger">内容</li>
</ul>
6、定制内容
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
十九、面板
1、基本实例
默认的.panel组件只是设置border和padding
<div class="panel panel-default">
<div class="panel-body">内容</div>
</div>
2、带标题的面板---panel-heading
<div class="panel panel-default">
<div class="panel-heading">标题</div>
</div>
如果为链接设置颜色,一定要把链接放在带.panel-title类的标题标签里
3、带脚注的面板----按钮或次要文本放入.panel-footer容器内
3、情境效果
<div class="panel panel-primary/success/info/warning/danger">...</div>
4、带表格的面板
不需要边框的表格添加.table类,如果有.panel-body的面板,为上方添加边框会有分隔效果
5、带列表组的面板
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
</div>
二十、具有响应式特性的嵌入内容
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
embed-responsive-item类:让最终样式与其他属性相匹配。
二一、Well
<div class="well">...</div>-----能有嵌入的简单效果
如果添加well-sm/lg等,可以控制其padding和圆角设置
<div class="well well-sm/lg">...</div>
相关推荐
Bootstrap下的组件datagrid使用demo试例,简单易于消化!
Bootstrap4 是一个流行的前端开发框架,它为网页设计师和开发者提供了快速构建响应式、移动优先项目的工具和组件。Axure RP 8 是一款原型设计工具,允许用户通过拖拽组件来创建交互式的设计原型。"Axure8 的 ...
Bootstrap的DataGrid组件是一款强大的数据展示工具,它充分利用了Bootstrap框架的灵活性和美观性,为开发者提供了便捷的方式来呈现和操作表格数据。这个组件是专为Web应用设计的,旨在简化数据的分页、条件查询以及...
3.Bootstrap 周边优秀组件封装,让Bootstrap更丰满,使用更简单; 4.压缩后仅5.5k BootstrapQ 对 bootstrap 做了一些封装,可以使大家使用更方便,如下: 1.封装了alert 2.封装了confirm 3.封装了dialog 4....
一旦导入成功,这些Bootstrap组件就会出现在库面板中,设计师可以拖放它们到工作区,快速搭建具有Bootstrap风格的原型界面。 Bootstrap 3 的关键特性包括: 1. **响应式布局**:Bootstrap 3 提供了一个流式网格...
Bootstrap 分页组件的设计 Bootstrap 分页组件的设计是基于 Bootstrap 前端开发框架,简单设计了前端分页控件。该组件提供了一个基本的分页控件,能够满足大多数情况下的分页需求。 分页组件的结构 分页组件的...
Bootstrap是世界上最受欢迎的前端开发框架之一,它极大地简化了网页设计和开发流程。这个"bootstrap相关组件文件全集"包含了Bootstrap 3.3.7版本的所有核心组件和资源,是前端开发者的重要工具箱。 Bootstrap 3.3.7...
在深入探讨Bootstrap按钮组件之前,需要明确一点,Bootstrap按钮组件的运作依赖于button.js插件,这一点对于组件能够正常工作至关重要。 ### 按钮组件的基本结构 按钮组件的基本结构主要通过HTML的`<button>`元素...
5. **响应式布局(Responsive Layout)**:Bootstrap4的强大之处在于其响应式设计,可以适应不同设备的屏幕尺寸。Axure中的组件库也考虑了这一特性,各个组件都具备响应式调整的能力,确保在手机、平板、桌面等不同...
在这个“用Vue2实现的Bootstrap3组件”的项目中,开发者将Vue2的强大功能与Bootstrap3的美学和实用性相结合,创建了一套可复用的UI组件。 首先,让我们深入了解Vue2的关键特性。Vue2的核心理念是组件化,它允许...
Bootstrap分页组件是Web开发中常见的一种功能,用于在大量数据中进行页面切换,提高用户体验。Bootstrap-Paginator是一个专门针对Bootstrap框架设计的轻量级分页插件,它能够帮助开发者快速、便捷地在网页应用中实现...
Bootstrap二维码组件是Web开发中一个实用的工具,它利用了流行的Bootstrap框架的样式和灵活性,为网站添加生成和展示二维码的功能。Bootstrap是一个广泛使用的前端开发框架,它提供了一套响应式设计、移动设备优先的...
NG Bootstrap提供了与Angular无缝集成的Bootstrap组件,这些组件原生支持Angular的特性,如模板驱动和响应式设计,使得在Angular项目中使用Bootstrap变得更加简单。 **NG Bootstrap的主要组件及特点** 1. **模态框...
Bootstrap Table是一个功能强大的表格组件,它提供了许多有用的功能,包括多层表头的实现。在本文中,我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头,每个...
bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始,请查看 http://skywalkapps.github.io/bootstrap-notifications ...快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项:下载
基于Bootstrap样式的分页组件
主要介绍了bootstrap fileinput组件整合Springmvc上传图片到本地磁盘的方法,需要的朋友可以参考下
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件,它提供了美观、易用的用户界面,用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本,确保了与不同Bootstrap设计...