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；宽度）
实例
<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div>
.col-md-offset-4 .col-md-push-6 .col-md-pull-4( 左右偏移 )
<div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div>
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>
<li class="disabled"><a href="#">…</a></li> </ul>
.nav-pills(胶囊) .nav-stacked(去除float/上间距2px)
<ul class="nav nav-pills "> <li ><a href="#">…</a></li> <li class="disabled"><a href="#">…</a></li> </ul>
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)
实例
<ul class="nav nav-tabs"> <li class=”dropdown-header”>…</li> <li class="dropdown /*open*/"> <a href="#" class="dropdown-toggle" date-toggle="dropdown" >下拉</a><span class="caret"></span> <ul class="dropdown-menu "> <li class="dropdown-header"></li> <li class="divider"></li> </ul> </li> </ul>
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;)
实例
<header class="navbar navbar-inverse navbar-fixed-top"> <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> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </header>
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 */ ">
<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"><input type="text" class="form-control" > </div> </div>
7. btn 按钮
.btn-link (默认色) .btn-lg ｜.btn-sx | .btn-sm (按钮大小)
.btn-block（宽度100%） .btn-default | .btn-primary | .btn-warning | .btn-danger | .btn-success | .btn-info (常用几种状态 默认色在 variables.less修改 )
8. btn-group 按钮组
.btn-group &.dropup( 下拉窗口向上)
.btn-group-lg | .btn-group-sm | .btn-group-xs(按钮大小) .btn-toolbar(组合进一个组件) .btn-group-vertical | .btn-group(一横一竖两状态) 实例
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group-vertical(垂直排列)
<div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group">...</div> </div>
. btn-group-justified(100%宽)
<div class="btn-group btn-group-justified"> <button type="button" class="btn btn-default">Left</button> </div>
9. 按钮下接菜单 (data-toggle="dropdown" 主要属性 class="dropdown-menu" 不能写错)
<div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <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" ><li>…</li></ul> </div>
- breadcrumbs 面包屑 .breadcrumb>li&+li:before {padding: 8px 15px; content: / (修改”/”符号>)}
实例
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active"><h1>Data</h1></li> </ol>
- pagination 分页 .pagination-lg ｜ .pagination-sm(分页文字显示大小) .avtive (当前状态) .disabled(禁用)
实例
<ul class="pagination"> <li class="active"><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">»</a></li> </ul>
- pager翻页 .pager {&.next{} | &.previous{} | &.disabled }
实例
<ul class="pager"> <li class="previous"><a href="#">«</a></li> <li class="next"><a href="#">1</a></li> </ul>
- lable 标签 .label . label-default | .label -primary | .label-warning | .label-danger | .label-success | .label-info (常用几种状态 默认色在 和btn色一样，区别在于btn 鼠标移上去有渐变效果) 实例
<span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> 14. badge 徽章
.badge(display: inline-block; padding: 3px 7px; border-radius: @;圆角variables修改) 实例
<ul class="nav nav-pills "> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home </a> </li> </ul>
15. alert警告框
.alert(声明)
.alert-dismissable(关闭按钮) .alert-success | .alert-info | .alert-warning | .alert-danger(对话框装态) 实例
<div class="alert alert-success alert-dismissable "> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong> success!</strong> Best check yo self, you're not looking too good. </div> <div class="alert alert-info">...</div>
16. progress进度条 (.progress-striped加上.active使它由右向左运动。在IE的不可用)
.progress (声明) .alert-dismissable(关闭按钮) . .progress-bar-success | .progress-bar-info | .progress-bar-warning | .progress-bar-danger (进度条装态)
实例
<div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>
<div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>
17. list-group 列表组
.list-group { .list-group-item-heading (条目标题) . list-group-item-text(条目内容)}
实例
<ul class="list-group"> <li class="list-group-item">… <span class="badge">14</span></li> <li class="list-group-item">…</li> <li class="list-group-item">…</li> </ul>
<div class="list-group"> (链接条目) <a class="list-group-item active"> <h4 class="list-group-item-heading"></h4> <p>class="list-group-item-text"</p> </a> <a class="list-group-item">…</a> <a class="list-group-item">…</a> </div>
18. panel 面版
.panel {声明}
.panel-group .panel-body{padding: 15px; .clearfix()} .panel-heading | .panel-footer(上下标题) .panel-primary | .panel-success | .panel-info | .panel-warning | .panel-danger(面版状态)
实例
<div class="panel panel-warning "> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div>
面版标题会和表格和列表
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> <table class="table"></table> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> </ul> </div>
19.thumbnails 缩略图 （要和grid配合一起用）
.jumbotron{声明}
实例
<div class="row">
<div class=" col-md-4">
<div class="thumbnail">
<img alt="...">
<div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div>
5110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
