您正在查看: 菜菜子 发布的文章
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样式
父页面
子页面
孙页面
...
bootstrap--components(六)--navbar导航条
```html
navbar导航条
1.导航条的基本使用
放在nav标签中
导航条
2.反色调的导航条样式,为.navbar添加.navbar-inverse,背景变黑
...
bootstrap--components(五)--nav导航
```html
nav导航
1.最初状态下的导航应当使用ul>li
首页
新闻
关于
2.导航条---为ul添加.nav样式
不要将 role 属性添加到 ul 上,因为这样可以被辅助设备(残疾人用的)上被识别为...
bootstrap--components(四)--输入框组
```html
输入框组
1.基本实例--在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
不支持在输入框的单独一侧添加多个额外元素(.input-group-addon 或 .input-group-btn)。
额外元素在前面i...
bootstrap--components(三)--按钮组
```html
按钮组
1.没有添加按钮组中的按钮
左
中
右
2.添加到按钮组中的按钮
为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的 role 属性。对于按钮组合,应该是 role=...
bootstrap--components(二)--下拉组件
```html
下拉菜单组件
如果为.dropdown添加.open会默认展开
Dropdown
我是下拉菜单标题
正常的下拉元素
正常的下拉元素
...
bootstrap--components(一)--图标组件
```html
Glyphicons字体图标组件
Glyphicons字体图标应当以i、span或者button等标签内部,必须先添加glyphicon类,在添加其他的图标类,图标类共有250多个
当图标纯粹作为装饰用途时,我们为这些图标设置了 aria-hidden="tru...
bootstrap--css(十一)--响应式工具
```html
响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
重点在于不同显示器宽度的显示和隐藏
我只在超小屏幕上显示(手机)《768px
我只在小屏幕上显示(...
bootstrap--css(十)--辅助类
```html
辅助类
.abc {
background: indianred;
width: 100px;
height: 100px;
}
文本颜色
柔和灰text-muted
主要蓝text-primary
成...
bootstrap--css(九)--栅格系统(二)
栅格参数超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C.container 最大宽度None (自动)750px970px1170px类前缀.col-xs-.col-s...