Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
1、脚手架——全局样式,响应式的12列栅格布局系统
2、基础CSS——包括基础的HTML页面要素
3、组件——收集了大量可以重用的组件
4、JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果
表格tables 表单forms 按钮buttons\btn 缩略图thumbnails
下拉菜单dropdown 导航条navbar 导航nav 面包屑breadcrumbs
分页pagination 栅格grid\col- 输入框input-group 按钮组button-group\btn-
标签labels 徽章badge 警告框alerts 进度条 progress
列表组list-group 面板panel
1/ LESS命名规范:
文件名+功能定认css 名称
.tables.css (.table-header .table-body .table-)
.grids.css (.col- 有含义不能重 )
.bottons.css (.btn可用简写)
2/ LESS变量:
variables 基础变量
@alert-link-font-weight: bold;
@badge-font-weight: bold;
@close-font-weight: bold;
这样的扩展性好, 可以局布修改 alert样式
3/ LESS案例:
1.grids栅格
.col-md-1 .col-md-2 … .col-md-12 (默认把容器分成12列, col-md-6 50% col-md-4 25%)
.col-md-offset-4 .col-md-push-6 .col-md-pull-4( 左右偏移 )
.col-md-lager .col-md-small .col-md-base (自定义标签 可以自定义宽度)
(grid以div标签做到和table td 一样的功能, 默认是padding:0 15px;宽度)
实例
.col-md-offset-4 .col-md-push-6 .col-md-pull-4( 左右偏移 )
2.nav导航
.nav( 声明导航 margin-bottom: 0; padding-left: 0; .clearfix())
.nav-stacked(去除float/上间距2px)
.nav-justified(nav-tabs导航100%宽)
.nav > li { &.disabled}(冻结) .nav .caret {}(下接箭头)
.nav-pills | .nav-tabs (一横一竖两种状态)
实例
.nav-tabs(切换) .nav-justified(宽100%\文字中齐)
<ul class="nav nav-tabs nav-justified ">
<li ><a href="#">…</a></li>
.nav-pills(胶囊) .nav-stacked(去除float/上间距2px)
3. dropdown 下接菜单
.dropdown (position: relative; 点下拉时会增加 open打开dropdown-menu )
.dropdown-header(标题)
.divider(横线, 在li中用)
.disabled( 禁用 )
.caret (小煎头)
.dropdown-menu{}( 默认dropdown-menu为隐藏 ) dropdown-menu {&.pull-right}(显示内存为右浮动)
date-toggle=“dropdown”(这是开启下接js)
实例
4.navbar导航条
.navbar (声明导航,相对定位 | clearfix )
.navbar-inverse | .navbar-default(两种装态 一黑一白背景)
.navbar-header .navbar-brand(logo 容器 )
.navbar-static-top .navbar-fixed-top(导航条定位)
.collapse .navbar-collapse (导航 search搜索框容器)
.navbar-left .navbar-right(左右浮动)
.navbar-nav (和nav结合一起用/float:left;)
.navbar-link (正确默认色 )
.navbar-form (很好垂直对齐)
.navbar-btn(导航条里垂直居中)
.container (容器 默认paddign:0 15px;)
实例
<div class="container">
<div class=”navbar-header”>
<div class=”navbar-brand”></div>
</div>
<div class="collapse navbar-collapse">
<ul class=”nav navbar-nav">
<li class="active">a</li>
<li>b</li>
<li>c</li>
</div>
</div>
5. form 表单
.form-group() .form-control() .form-inline() .form-horizontal()
.has-warning | .has-error | .has-success (表单状态)
.radio-inline | .checkbox-inline( display: inline-block; padding-left: 20px;)
.radio | .checkbox( display:block; padding-left: 20px; label {display: inline;})
( 默认样式 )
input[type=“radio”],input[type=“checkbox”] {
margin: 4px 0 0; margin-top: 1px \9; / IE8-9 / line-height: normal;}
label {display: inline-block; margin-bottom: 5px; font-weight: bold; }
fieldset{margin:0p; padding:0; border:0;}
legend{ display: block; width: 100%;padding: 0; margin-bottom: height; line-height: inherit;
font-size: (@font-size-base * 1.5); color: …;border: 0; border-bottom: 1px solid color;}
6. input-group 输入框 (不要.input-group和.form-group混合使用)
.input-group(display: table; position: relative; &.form-control{width: 100%;})
.input-group-addon(加小图标)
.input-group-btn{下接菜单}
.input-group-lg | .input-group-sm (输入框大小)
实例
<div class="input-group input-group-lg /* input-group-sm */ ">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span></button>
<ul class="dropdown-menu"><input type="text" class="form-control" > </div>
17. list-group 列表组
.list-group { .list-group-item-heading (条目标题) . list-group-item-text(条目内容)}
实例
class="list-group-item-text"
… …18. panel 面版
.panel {声明}
.panel-group
.panel-body{padding: 15px; .clearfix()}
.panel-heading | .panel-footer(上下标题)
.panel-primary | .panel-success | .panel-info | .panel-warning | .panel-danger(面版状态)
实例
面版标题会和表格和列表
19.thumbnails 缩略图 (要和grid配合一起用)
.jumbotron{声明}
实例
<div class="row">
<div class=" col-md-4">
<div class="thumbnail">
<img alt="...">
</div>
</div>