media 根据不同的屏幕大小,选择不同的CSS文件
<link rel="stylesheet" type="text/css" media="screen and (max-500px)" href="small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-500px)" href="large.css">
Bootstrap----部分类名的应用
颜色类名: -danger红 -warning黄 -success绿 -info信息蓝 -primary主要蓝 (前面加上相关基本类名 eg: btn-danger 按钮是红色)
文本:
文本位置: 居中 text-center , 居右 text-right , 居左 text-left , 两端对齐 text-justify (IE 支持的浏览器不多)
大小写: 大写 text-uppercase 小写 text-lowercase 首字符大写 text-capitalize
突出强调 lead 不换行 text-nowrap
文本颜色: 红色字体text-danger ...... 柔和灰 text-muted
背景颜色: bg-danger bg-warning bg-success bg-info bg-primary
列表:
无样式 list-unstyled 行内 list-inline
table基本表格样式:
每个类名是一种效果,它们之间需要组合使用
class=" table table-bordered table-striped table-hover " table-striped 表示隔行有条纹
按钮:
类型大小: btn-lg 大 btn 基本按钮样式 btn-sm 小按钮 btn-xs 小小按钮
按钮颜色: btn-danger ...... btn-link
按钮分组: btn-group
活跃的 active 禁止点击 disabled 关闭 close(向右浮动) (×) × <button class="btn close"> × </button>
左右浮动: pull-left pull-right 清除浮动: clearfix
显示与隐藏: show hidden
响应式: 大屏显示 visible-lg-inline 大屏隐藏 hidden-lg 三种后缀: inline block inline-block
263个图标的类:
要放图标: glyphicon 哪个类型 :glyphicon-waining-sign 效果图:
分页: 用ul-li 标签写,
<ul class="pagination pagination-lg">
<li>标签内部放<a>标签 eg: <li><a href="">⟨</a></li> <li><a href="">1</a></li> <li><a href="">⟩</a></li>
翻页: 用ul-li 标签写,
<ul class="pager">
<li>标签内部放<a>标签 eg: <li><a href="">上一页</a></li>
对齐翻页: 用ul-li 标签写,
<ul class="pager">
<li>标签内部放<a>标签 eg: <li class="previous"><a href="" >上一页</a></li>
<li class="next"><a href="" >上一页</a></li>
徽章: badge
表单:
form 块级 form-inline 行内 form-ground 分组
input标签:
form-control input基本样式 input-ground 分组 input-ground-addon将框外文字与输入框结合在一起
在输入框后添加图标:
下拉菜单: (默认隐藏 点击显示)
1.按钮和菜单放在一个外层盒子中 类名为dropdown(下拉) 或 dropup(上拉) 其内部属性和类都不变
2.按钮需要设置一个属性 data-toggle="dropdown"
3.菜单<ul>标签设置类名 dropdown-menu
栅栏(格)系统:
把屏幕分为12列, 通过行row 列col 组合来分配格子
最外层盒子的类名为 Container 固定宽度 或 container-fluid 100%宽度
大屏 lg >1200px 中屏 md >992px 小屏 sm >768px 特小屏 xs <768px
col 只能作为 row的子标签 eg: <div class="row"><div class="col-md-4"></div></div> 若另起一行,只占设置的比例
如果每一份要使用栅格,就要使用外层类名为row的盒子
替换 col-md-pull-移动的列数 向左边移动
col-md-push-移动的列数 向右边移动
留空白 空白位置在中间,通过移动 col-md-offset-移动的列数
导航: ul-li
面包屑导航: (路径导航) <ul>的类名为: breadcrumb 类似于这种效果: qq / 分组 / 同学
导航nav:
nav 导航样式 nav-tabs 基本导航 nav-pills 胶囊 nav-stacked 竖向 nav-justify 两端对齐
导航条:
navbar 导航条 navbar-default 基本导航条 navbar-inverse 反色导航条