bootstrap

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-8
.col-md-4

.col-md-offset-4 .col-md-push-6 .col-md-pull-4( 左右偏移 )

.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
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>
    

    Submit
        </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>
    
    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(一横一竖两状态) 实例
    ...
    ...
    .btn-group-vertical(垂直排列)
    Button Button
    ...
    . btn-group-justified(100%宽)
    Left
    9. 按钮下接菜单 (data-toggle="dropdown" 主要属性 class="dropdown-menu" 不能写错)
    Default Action
    10. breadcrumbs 面包屑 .breadcrumb>li&+li:before {padding: 8px 15px; content: / (修改”/”符号>)} 实例
    1. Home
    2. Library
    3. Data

    11. pagination 分页 .pagination-lg | .pagination-sm(分页文字显示大小) .avtive (当前状态) .disabled(禁用) 实例
    • «
    • 1
    • 2
    • 3
    • »
    12. pager翻页 .pager {&.next{} | &.previous{} | &.disabled } 实例
    • «
    • 1
    13. lable 标签 .label . label-default | .label -primary | .label-warning | .label-danger | .label-success | .label-info (常用几种状态 默认色在 和btn色一样,区别在于btn 鼠标移上去有渐变效果) 实例 Primary Success Info Warning Danger 14. badge 徽章 .badge(display: inline-block; padding: 3px 7px; border-radius: @;圆角variables修改) 实例
    • 42 Home
    15. alert警告框 .alert(声明) .alert-dismissable(关闭按钮) .alert-success | .alert-info | .alert-warning | .alert-danger(对话框装态) 实例
    × success! Best check yo self, you're not looking too good.
    ...
    16. progress进度条 (.progress-striped加上.active使它由右向左运动。在IE的不可用) .progress (声明) .alert-dismissable(关闭按钮) . .progress-bar-success | .progress-bar-info | .progress-bar-warning | .progress-bar-danger (进度条装态) 实例
    45% Complete
    35% Complete (success)
    20% Complete (warning)
    10% Complete (danger)
    17. list-group 列表组
    

    .list-group { .list-group-item-heading (条目标题) . list-group-item-text(条目内容)}

    实例

    • 14
    (链接条目)

    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(面版状态)
    

    实例

    Panel heading without title
    Panel content

    面版标题会和表格和列表

    Panel heading without title
    Panel content
    • Cras justo odio
    19.thumbnails 缩略图 (要和grid配合一起用)
    

    .jumbotron{声明}

    实例

     <div class="row"> 
    <div class=" col-md-4"> 
        <div class="thumbnail"> 
    <img alt="..."> 
    

    Thumbnail label

    ...

    Button Button

                </div>
    </div> 
    

    你可能感兴趣的:(bootstrap)