Boostrate之CSS介绍

Boostrate 是一个非常受欢迎的前端开发框架，其强大之处在于对常见的css布局小组件和JavaScript插件都进行了完整而且完善的封装。我们可以对现有插件进行二次扩展，最后开发出自己的完整插件。总结下：需要了解boostrate的思想理念。看看它设置了什么，方便记忆。小图标的基本用法身份简单，在内联元素上应用对应的样式即可。如<li class = “glyphicon glyphicon-search”><span class = “glyphicon glyphicon-search”>实现方式：使用CSS3中@font-face特性，将服务器上字体设置为web字体@font-face { font-family: 'Glyphicons Halflings'; //自定义的字体名称 src: url('../fonts/glyphicons-halflings-regular.eot');//存放路径，字体格式src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}①.nav基础样式 布局方式（相对）、块级显示、padding、active、disable状态下等①②nav-tab选项卡导航 设置li定义非高亮显示和高亮显示样式和鼠标触发行为。③nav-pills胶囊式选项卡 风格加大圆角设置，背景色④nav-stacked堆叠式导航 在③基础上面，默认不设置浮动，垂直摆放，可以设置nav-divider分隔符⑤nav-justified自适应导航 将li元素充满整个父容器，只需要在②或③后面添加即可⑥dropdown二级导航 在②或③中的li中加入⑥，区别是②中有边框而③没有，③四个边框有圆角而②左下和右上没有圆角。⑤无特殊设置。①//boostrap.css源码分析.nav { padding-left: 0; margin-bottom: 0; list-style: none; //消除list圆点}.nav > li { position: relative; //所有菜单项都是相对定位 display: block; //块级显示}.nav > li > a { position: relative; //a链接相对定位 display: block; //块级显示 padding: 10px 15px; //外边距略大}.nav > li > a:hover,.nav > li > a:focus { text-decoration: none; background-color: #eee; }//移动或焦点时处理.nav > li.disabled > a { color: #777;} color: #777; .nav > li.disabled > a:hover,.nav > li.disabled > a:focus { text-decoration: none;cursor: not-allowed; background-color: transparent;}//禁用时处理方式.nav .open > a,.nav .open > a:hover,.nav .open > a:focus { background-color: #eee; border-color: #337ab7;}.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}.nav > li > a > img { max-width: none;//不限制a 链接中的图片宽度}②.nav-tabs { border-bottom: 1px solid #ddd;//所有菜单下都有横线，整体导航为水平方向}.nav-tabs > li { float: left; margin-bottom: -1px;}.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; //透明边框 border-radius: 4px 4px 0 0; //每个菜单项上面都有圆角}.nav-tabs > li > a:hover { border-color: #eee #eee #ddd; //非高亮，菜单项在鼠标触发时的背景颜色}.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; //高亮状态下，背景颜色为白色 border: 1px solid #ddd; border-bottom-color: transparent; //高亮状态下，横线为透明，不显示}③.nav-pills > li { float: left;}.nav-pills > li > a { border-radius: 4px; //圆角设置}.nav-pills > li + li { margin-left: 2px; // 加大左外边距} .nav-pills > li.active > a,.nav-pills > li.active > a:hover,.nav-pills > li.active > a:focus { color: #fff; background-color: #337ab7;}//高亮菜单设置背景和颜色，文字白色，背景为蓝色④.nav-stacked > li { float: none; //不设置浮动}.nav-stacked > li + li { margin-top: 2px; //设置两个li之间的top值 margin-left: 0;} .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}⑤.nav-tabs.nav-justified { width: 100%;//宽度充满这个父容器 border-bottom: 0;}.nav-tabs.nav-justified > li { float: none;//取消浮动}.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}//自适应小分辨率下可以多行显示@media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell;//表格风格显示 width: 1%; }} .nav-tabs.nav-justified > li > a { margin-bottom: 0; }.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px;}.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active > a:hover,.nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; }⑥使用nav-tab 和 nav-pills效果如图1 和图2 。 ①navbar导航条 就是比nav多了背景条，设置左右的padding和圆角等.navbar-default/inverse 风格设置专用，主要设置颜色及反色。.navbar-brand 作用为加大字体显示并控制最大宽度显示.navbar-form 在.navbar容器内放置form元素（navbar-left/navbar-right）.navbar-nav/ btn/link/text 功能键定义.navbar-header 一般在头部div中添加文字⑧.nav-fixed-top/bottom 利用position为fixed，绝对定位的特性。⑨.nav-toggle 用于toggle收缩的内容，对应.nav-collapse collapse <nav class="navbar navbar-default"> <div class="navbar-header"><a href="" class="navbar-brand">Brand</a></div> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"/> <button type="submit" class="btn btn-default">按钮左</button> </div> </form> </nav>⑧.navbar-fixed-bottom固定在最底部显示，.navbar-fixed-top固定在最头部显示.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }如果运行后，顶部固定时其他内容被遮住了，因为navbar高度为设置为50px，所以需要设置body的padding。如下：body{padding-top:70px} 顶部固定情况下；body{padding-bottom:70px} 底部固定情况下。⑨nav-toggle在浏览器大于768像素时不显示，在小于768px时显示.navbar-toggle { position: relative; //相对定位 float: right; //右浮动 padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px;}.navbar-toggle:focus { outline: 0; //焦点状态轮廓取消} .navbar-toggle .icon-bar {//响应式中icon设置 display: block; //块级显示 width: 22px; height: 2px; //限制高度，一般都是3个 border-radius: 1px;}.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px;//多个icon之间垂直间隔}@media (min-width: 768px) { .navbar-toggle { display: none; //宽屏下自动消失 }} <div class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Brand</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单1</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">子菜单4<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> </ul></li> </ul></div></div>breadcrumbs面包屑导航条 源码 display：incline-block content: "/\00a0";pagination分页导航 源码：incline-block incline 状态和边框处理pager翻页显示 整体居中，li元素有圆角，左右浮动label标签 label-default/primary/success… display：incline，label字体大小相对于h1..改变badge徽章 display：incline，背景色，超大圆角，相对定位jumbotron大屏幕展播 加大外边距，内边距，宽窄屏下不同字体显示⑦thumbnails 缩略图 结合12栅格，display:block,图片外4px像素⑧alert警告框 设置button的data-dismiss =”alert”⑨alert-dismissable 同⑧ 增加了右外边距，放置关闭符号⑩alert-link 加深颜色 在相应alert风格下（warning/success/info/danger）加深well洼地 和大屏幕展播Jumbotron类似，多了边框，自适应文本 ⑦栅格系统布局实例⑧可以关闭的警告框<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button></div>process 设置进度条的容器样式process-bar 限制进度条的进度（颜色进度）progress-striped 条纹样式background-image: linear-gradientmedia 媒体对象是一个抽象样式，用于构成不同组件list-group/list-group-item 列表组（相对布局、块状显示）list-group-item-heading/text 设置heading和text元素的文本元素panel/panel-default 面板的样式和颜色panel-heading/footer 头部和尾部的面板效果 <div class="panel panel-default"> <div class="panel-heading">我的图书</div> <div class="panel-body"> <p>Some default panel content here</p> <table class="table table-bordered"> <thead> <tr> <td>#</td> <td>图书名称</td> <td>出版社</td> <td>座椅者</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Javascript 编程精析</td> <td>机械出版社</td> <td>汤姆大叔</td> </tr> </tbody> </table> </div> </div>面板和列表组合嵌套的效果如上Boostrape增加一个boostrap-theme.css文件，该文件针对一些常用css组件进行增强。针对9个方面的组件进行增强：btn选项、缩略图、下拉菜单、导航条、警告框、进度条、列表组、面板和well。dropdown 大容器，相对定位dropdown-menu 菜单li上的容器，默认为隐藏，绝对定位（显示时加.open）dropdown-header 对颜色、字号和内边距设置dropdown-submenu 二级菜单设置（pull-right向右；dropup向上弹出）btn-group(-xs/sm/lg) 按钮分组，相对定位，垂直居中btn-toolbar 按钮工具栏，多个按钮组排列一起，使用table风格btn-group 下拉菜单外包装一个div元素btn-group-vercial 垂直分组，宽度自适应btn-group-justified 在btn-group基础上使用所有按钮充满容器btn-group .dropup 上弹菜单 <div class="btn-group"> <a href="#" class="btn btn-default">User<span class="glyphicon glyphicon-user"></span></a> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Edit <span class="glyphicon glyphicon-edit"></span></a></li> <li><a href="">Delete <span class="glyphicon glyphicon-trash"></span></a></li> <li><a href="">Ban <span class="glyphicon glyphicon-ban-circle"></span></a></li> <li class="divider"></li> <li><a href="#">Make admin</a></li> </ul> </div> ①input-group(-lg/sm) 输入框组②input-group-addon 输入框组下的小图标,放置label，icon，checkbox，radio③Input-group-btn 在②基础上加入内外边界 ① input-group主要实现以下功能：将各个元素无缝拼接在一起，并设置margin为0；将各个元素设置为等高，即display：table-cell；设置addon元素的显示方式；<div class="row"> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control"/> <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 pull-right"> <li><a href="#">what</a></li> <li><a href="">is that</a></li> </ul> </div> </div> </div> </div不管前后addon有几个，进行圆角处理。