bootstrap

原创
2013/11/04 10:02
阅读数 1.6K
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>

  1. 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>

  1. pagination 分页 .pagination-lg | .pagination-sm(分页文字显示大小) .avtive (当前状态) .disabled(禁用)

实例

<ul class="pagination"> <li class="active"><a href="#">&laquo;</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">&raquo;</a></li> </ul>

  1. pager翻页 .pager {&.next{} | &.previous{} | &.disabled }

实例

<ul class="pager"> <li class="previous"><a href="#">&laquo;</a></li> <li class="next"><a href="#">1</a></li> </ul>

  1. 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">&times;</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>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部