bootstrap学习笔记

bootstrap学习笔记

-----------------------

移动端设备的真实宽度

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

***************************************************

***jquery.min.js 必须放在 bootstrap.min.js的前面***

***************************************************

一、css样式

1)布局容器

.container   .container-fuiled(100%)

2)栅格系统

    .row

    .col-md-12  .col-lg-12  

          

     <div class="row">
          <div class="col-md-6">  </div>
          <div class="col-md-6">  </div>
      </div>

        列偏移 .col-md-offset-num

3)排版

    1.标题  .page-header

    2.段落  .lead

    3.mark标记

    4.del删除线

    5.smll小号字体

    6.对齐 .text-left  .text-right  .text-center  .text-justify(两端对齐)  .text-nowrap

    7.改变大小写  .text-lowercase  .text-uppercase  .text-capitalize(首字母大写)

    8.无样式列表  .list-unstyled

    9.内联列表   .list-inline

    10.水平排列   .dl-horizontal     

          <dl class="dl-horizontal">

                  <dt></dt>

          </dl>

    11.自动截断   .text-overflow

4)表格.table

    条纹状表格 .table-striped   <table class="table table-striped">...</table>

    带边框  .table-bordered

    鼠标悬停  .table-hover

    紧缩表格   .table-condensed

    颜色  .active     .success     .info     .warning     .danger

    响应式表格 

<div class="table-responsive">
      <table class="table">
        ...
      </table>
 </div>

5)按钮(<button>  <a>  <input  type="button" type="submit"  type="reset"> )

    .btn   (灰色)

    .btn-default  (白色)

    .btn-primary

    .btn-success

    .btn-info

    .btn-warning

    .btn-danger

    .btn-link  链接式按钮

    按钮大小    .btn-lg

                .btn-md

                .btn-xs

                .brn-block(块级按钮)

    激活状态 .active

    禁用状态 .disabled

6)图片

    响应式图片  .img-responsive

    形状

    .img-rounded 方形

    .img-circle 圆形

    .img-thumbnail

7)辅助类

    1.文本颜色

    .text-muted

    .text-primary

    .text-success

    .text-info

    .text-warn

    .text-danger

    2.背景颜色

    .bg-primary

    .bg-success

    .bg-info

    .bg-warn

    .bg-danger

    3.关闭按钮  .close

    4.三角符号  .caret

    5.快速浮动  .pull-left  .pull-right

    6.内容快居中  .center-block

    7.清除浮动  .clearfix

    8.显示隐藏  .show .hide

    9.图片替换  .text-hide

    10.屏幕阅读器和键盘导航   .sr-only 和 .sr-only-focusable

8)表单 .form-group  .from-control

    <form>
      <div class="form-group">
        <label for="ww">Email address</label>
        <input type="email" class="form-control" id="ww" >
      </div>
     </form>

内联表单 .form-inline   .input-group-addon(输入控组)

水平排列的表单 (列对齐) .form-horizontal  .control-label

        <form class="form-horizontal">
          <div class="form-group">
            <label for="l3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="l3" placeholder="Email">
            </div>
          </div>
          ......
        </form>

被支持的控件

  .checkbox 复选框(name为同一个值,变为单选框)

  .radio 单选框 (name为同一个值,变为单选框组)

  .checkbox-inline

  .radio-inline

静态控件  .form-control-static

Help text(帮助提示) .help-block

校验状态(表单框的颜色)  .has-success

                        .has-warning

                        .has-error

        (添加图标).has-feedback

控件尺寸 .input-lg

         .input-sm

二、组件

1.字体图标

2.下拉菜单 .dropdown   .dropup

data-toggle="dropdownn"---->触发js

        <div class="dropdown">
            <button class="btn btn-default" data-toggle="dropdown" > Dropdown </button>
            <ul class="dropdown-menu" >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            </ul>
        </div>

    .dropdown-menu-right  对齐

    .dropdown-header      标题

    .divider  分割线

    .disabled  禁用菜单项(只是样式,并没有禁用)

    .dropdown-toggle  圆角

3.按钮组 .btn-group

按钮组工具栏 .btn-toolbar

按钮组尺寸  .btn-group-lg

            .btn-group-sm

            .btn-group-xs

嵌套 

按钮组垂直排列 .btn-group-vertical

两端对齐的按钮组 .btn-group-justified

    <div class="btn-group btn-group-justified" >
        <div class="btn-group" >
            <button class="btn btn-default">Left</button>
        </div>
        ...
    </div>

4.按钮式下拉菜单

    单按钮下拉菜单

    分裂式按钮下拉菜单

    尺寸

    向上弹出式菜单

5.输入框组  .input-group

    尺寸  .input-group-lg  input-group-sm

    作为额外元素的多选框和单选框  .input-group-addon

    作为额外元素的按钮  ,input-group-btn

    作为额外元素的按钮式下拉菜单   

    作为额外元素的分裂式按钮下拉菜单

    Multiple buttons

6.导航  .nav

    标签页  .nav-tabs  .active(当前页)

    胶囊式标签页  .nav-pills .nav-stacked(垂直)

    禁用的链接 .disabled

7.导航条

样式

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#1">
         <span class="icon-bar"></span>
              <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="1">
      <ul class="nav navbar-nav">
       <li><a href="">hello</a></li>
       <li><a href="">hello</a></li>
       <li><a href="">hello</a></li>
      </ul>

      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            li><a href="" title=""></a>
            ...
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    默认样式的导航条  <nav> 或 <div role="navigation"> 

                      .navbar .navbar-default

                      .navbar-header

                      .navbar-brand 居中

    品牌图标  <a class="navbar-brand" href="#"><img src="..."> </a>

    表单  .navbar-form

    按钮  .navbar-btn

    文本  <p class="navbar-text"></p>

    非导航的链接 .navbar-link

    组件排列  .navbar-left 和 .navbar-right

    固定在顶部  .navbar-fixed-top

    固定在底部  .navbar-fixed-bottom

    静止在顶部  .navbar-static-top

    反色的导航条  .navbar-inverse

8.路径导航 .breadcrumb

9.分页 

    默认分页  .pagination  &laquo;<<  &raquo;>>

          禁用.disabled  激活.active

          尺寸 .pagination-lg 或 .pagination-sm

    翻页  .pager

       两端对齐 .previous  next

10.标签  .label  .label-default

       颜色 .label-default

            .label-primary

            .label-success

            .label-info

            .label-warning

            .label-danger

11.徽章  .badge

12.巨幕  .jumbotron

13.页头  .page-header

14.缩略图  .thumbnail

15.警告框  .alert

    颜色.alert-success

        .alert-info

        .alert-warning

        .alert-danger

    可关闭的 .alert-dismissible data-dismiss="alert"

    警告框的链接 .alert-link   

16.进度条 .progress   progress-bar

    颜色.progress-bar-success

        .progress-bar-info

        .progress-bar-warning

        .progress-bar-danger

    条纹  .progress-bar-striped

    动画效果  .active

    堆叠

17.媒体对象  .media-body

         .media-left

         .media-object(放图片)

         .media-heading

         .media-middle(中部对齐)

         .media-list

18.列表组  .list-group   .list-group-item

        按钮 <button type="button" class="list-group-item">Cras justo odio</button>

        颜色 .list-group-item-success

              .list-group-item-info

              .list-group-item-warning

              .list-group-item-danger

        内容 .list-group-item-heading

             .list-group-item-text

19.面板 .panel  .panel-default

        .panel-body

        <div class="panel panel-default">
          <div class="panel-heading">Panel heading without title</div>
          <div class="panel-body">
            Panel content
          </div>
        </div>

        或

 

      <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>

        .panel-footer(脚注)

        颜色  .panel-primary

              .panel-success

              .panel-info

              .panel-warning

              .panel-danger

        .panel-body

20.具有响应式特性的嵌入内容 

    .embed-responsive  .embed-responsive-16by9  .embed-responsive-4by3

    <iframe class="embed-responsive-item" src="..."></iframe>

21.Well(嵌入的效果)   .well