bootstrap
bootstrap</u><u>是基于HTML、CSS、Javascript开发的,在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。
优点:简洁灵活、使WEB开发更加快捷。
bootstrap.min.css第三方开源框架,基于UI(开放源代码)bootstrap.min.js兼容IE8浏览器
按钮
使用方法:在元素上添加样式名,前提必须添加公共类
按钮样式名:
.btn--(公共类)基础样式(带渐变的标准灰色按钮)
.btn-default 默认按钮
.btn-primary 主要按钮(视觉吸引力强,用于标识一组按钮中最主要的动作)
.btn-success 成功按钮(表示操作成功或动作正确)
.btn-warning 警告按钮(表示动作应该谨慎)
.btn-info 信息按钮(可用于替换默认样式)
.btn-danger 危险按钮(表示危险或有潜在威胁的动作)
.btn-inverse 相反按钮(做为补充的深灰色按钮,与具体行为或动作无关)
.btn-link 链接按钮
.btn-lg 大型按钮
.btn-sm 小型按钮
.btn-xs 迷你型按钮
表格
添加在table上的类:
.table 基础表格
.table-striped 斑马线表格[背景交替]
.table-bordered 带边框的表格
.table-hover 鼠标悬停显示高亮
.table-condensed 紧凑型表格
.table-responsive 响应式表格
添加在tr上的类:
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者错误行为
导航nav
.nav 导航公共类
.nav-tabs 基本标签页,切换性导航
.nav-pills 胶囊式导航
.nav-stacked 叠放式导航(与nav-tabs/nav-pills使用)
.nav-list 列表导航
.dropdown 加给li表示下拉样式导航
.breadcrumb 面包屑导航
文本对齐
.text-left 文字左对齐
.text-right 文字右对齐
.text-center 文字居中对齐
.text-justify 两端对齐
.text-wrap 文本换行
.text-nowrap 文本不换行
进度条
给父元素添加progress类
子元素添加 progress-bar 类
父元素追加 progress-striped 显示斑马纹
父元素追加 active 类显示斑马线动画
通知栏/警告框
父元素添加 alert类
.alert-error 危险/错误
.alert-success 成功
.alert-info 信息
父元素追加alert-block 提供更大的padding值
子元素a标签添加close 类创建关闭按钮
栅格系统
lg:1220以上
md中屏:992-1220
xs :768以下
sm:768-992