您正在查看: bootstrap 分类下的文章
bootstrap--js(一)--modal模态框
```html
modal模态框
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。
1.动态实例
Launch demo modal
...
bootstrap--components(二十)--响应式特性的嵌入内容
```html
responsive-embed具有响应式特性的嵌入内容
responsive-embed具有响应式特性的嵌入内容
直接应用在 iframe、embed、video 和 object元素上
超级提示: 不需要为 iframe 元素设置 fram...
bootstrap--components(十九)--panels面板组件
```html
panels面板
面板组件就是一个存放容器的组件
1.实例对比--默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
没有添加.panel-body样式
...
bootstrap--components(十八)--list-group列表组组件
```html
list-group列表组
列表组---不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。
1.基本样式
第一页
第二页
第三页
第四页
第五页
2.列表组与徽章结合...
bootstrap--components(十七)--media媒体对象组件
```html
media媒体对象
媒体对象---一般用于评论显示
1.默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)。
媒体框相对于文本向上显示,默认样式
...
bootstrap--components(十六)--well嵌入组件
```html
well组件
well组件---把 Well 用在元素上,就能有嵌入(inset)的简单效果
普通效果的div
带有well效果的div,我有一个简单的嵌入效果
well组件的大小控制---通过控制此组件的内补(p...
bootstrap--components(十五)--progress进度条
```html
progress进度条
progress进度条--为当前工作流程或动作提供实时反馈
兼容性:进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Fir...
bootstrap--components(十四)--alert警告框
```html
alert警告框
1.警告框的基本样式如下
ps:警告框没有默认类,添加完alert样式以后最好添加如下相对应的背景样式
成功的警告框
信息的的提示框
提示警告的警告框
提示危险的警告框
2.可关闭的警告框
...
bootstrap--components(十三)--thumbnails缩略图
```html
thumbnails缩略图
1.没有使用thumbnails缩略图组件的图片显示如下
下面图会显示成如下规则,中等(电脑)屏幕上每排4张,小(平板)屏幕上每排3张,超小(手机)屏幕上每排2张
图片会成上述响应式图片,但是图片打的大小比例依旧没有...
bootstrap--components(十二)--page-header页头
```html
page-header页头
1.页头--为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。
样式如下
.page-header {
paddin...
bootstrap--components(十一)--jumbotron巨幕
```html
jumbotron巨幕
1.巨幕是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。
流行---适合用于轮播,下面的是全屏幕展示且没有圆角,为div添加.jumbotron就是巨幕的外层div
Hello, world!
...
bootstrap--components(十)--badges徽章组件
```html
badges徽章组件
#aaa:empty {
height: 25px;
border: 1px solid #ddd;
background: #eee;
}
1.徽章组件可以很醒目的展示新的或未读的信...
bootstrap--components(九)--labels标签组件
```html
labels标签组件
1.标签,只需要为span标签添加.label和.label-default样式
example 标签
2.标签的颜色
当标签过多的且在一个很狭窄的区域展示,会很乱,所以最好为每个标签设置d...
bootstrap--components(八)--pagination分页
```html
pagination分页
1.pagination基本分页
分页使用ul>li进行划分,需要为ul添加.pagination样式,且ul必须在nav标签中,这是为了方便特殊浏览工具
...
bootstrap--components(七)-- breadcrumbs路径导航
```html
breadcrumbs路径导航
1.标明页面所处的位置
使用ol>li标签,并为ol添加.breadcrumb样式,当前页面为li添加active样式
父页面
子页面
孙页面
...