bootstrap

2016-02-17 本文已影响381人 wjing

起步
在IE中运行最新的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
初始化移动浏览显示:让视口的宽度=设备屏幕宽度，初始缩放比例为1
<meta name="viewport" content="width=device-width, initial-scale=1">
IE版本低于IE9

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
<!--IE8浏览器支持html5标签>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--IE8浏览器支持媒体查询> 
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

编译css和js文件

在bootstrap目录下，运行npm install
执行grunt dist

以后定制bootstrap时用。

栅格系统

如果给12个column设置.col-md-1。则在电脑上，它们会依次排开；而在手机和平板上，会从上往下堆叠。

==

某些列可能会出现比别的列高的情况：如下所示

屏幕快照 2016-02-17 下午3.50.20.png

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- 添加.clearfix和响应式工具类 -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

效果如下：

屏幕快照 2016-02-17 下午3.50.34.png

列排序

<div class="row"> 
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

列排序跟列偏移不同：列排序时，元素会脱离文档流。

排版

在 HTML 4.01 中不赞成使用 u 标签。
在 HTML 5 中不支持 u 标签。

对齐

.text-left
.text-right
.text-center
.text-justify 段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分文字不换行

辅助类
sr-only:除了屏幕阅读器外，其他设备上隐藏元素

三角符号

下三角变为上三角

.test-caret .caret{
  border-top:0;
  border-bottom:4px dashed;
}

导航条内的浮动
.navbar-left .navbar-right

内容块居中
.center-block

显示或隐藏
.show .hidden 只对块级元素起作用
.invisible 不改变display属性

按钮
.btn-lg .btn-sm .btn-xs 四种

表单

单选和多选框：都有固定的样式。
.checkbox .radio .checkbox-inline .radio-inline

禁用状态

为input button添加disabled属性，为a添加.disabled
fieldset设置disabled，里面的a链接功能不受影响

添加额外的图标

<div class="form-group has-success has-feedback">
    //这四个元素要放在同一级 
    <label class="control-label" for="inputSuccess2">Input with success</label> 
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">              
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
    <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

表格
六种表格
条纹状.table-striped,
边框.table-bordered
鼠标悬停.table-hover
紧缩.table-condensed
响应.table-responsive

响应式工具
visible | block | inline | inline-block
xs
sm
md
lg
.hidden-xs .hidden-sm .hidden-md .hidden-lg

打印类先不看

使用less

学习less的相关知识

variables.less less变量
使用autoprefixer.js添加前缀

常用的mixin

清除浮动
水平居中
尺寸助手
调整大小的文本域
截断文本

现在还用不到customization，所以不用学会less的源码

使用bootstrap中less的方式：Less: Beyond Basics with the Bootstrap Mixins Library

目录结构

屏幕快照 2016-02-19 下午2.10.42.png

style.less文件夹

@import "less/mixins/center-block.less";
    
p {
  .center-block();
}

实例精选

入门级模板

组件

导航条

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

以上是最简形式：1、.navbar-header；2、.navbar-collapse内添加导航内容
使用时需要注意的地方：1、修改#navbar；2、作为body的直接子元素

特殊情况

导航条内所包含元素溢出：减少元素；通过响应工具类隐藏；修改@grid-float-breakpoint，默认值是768px；自己重写相关媒体查询，覆盖原来的代码
依赖 JavaScript ，collapse插件
必须使用<nav>

将导航条内放置品牌标志的地方替换为 img 元素即可展示自己的品牌图标

导航条内包含表单

<form class="navbar-form" 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>

导航条内包含button，需要添加.navbar-btn
导航条内包含文本：

<p class="navbar-text">Signed in as Mark Otto</p>

非导航链接：.navbar-link

<p class="navbar-text navbar-right">Signed in as 
    <a href="#" class="navbar-link">Mark Otto</a>
</p>

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

不能向右对齐多个组件

固定在顶部：.navbar-fixed-top

需要为body设置padding-top

固定在底部
静止在顶部：会随着页面向下滚动而消失：.navbar-static-top
反色导航条：.navbar-inverse

巨幕

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
</div>

与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container
元素的外面，并在组件内部添加一个 .container
元素。

<div class="jumbotron"> 
  <div class="container"> 
    ... 
  </div>
</div>

页头
.page-header

支持 h1 标签内内嵌 small 元素的默认效果`

缩略图

<div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="images/post.jpg" alt="...">
      </a>
    </div>
  </div>

自定义内容:.caption

<div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <img src="..." 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>

标签

<span class="label label-default">New</span>

.label-primary等其他可用的变体

徽章

<span class="badge">4</span>

不包含任何内容时，可自动消失

下拉菜单

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

对齐: .dropdown-menu-left .dropdown-menu-right
在下拉菜单中添加标题: <li class="dropdown-header">Dropdown header</li>
在下拉菜单中添加分割线: <li role="separator" class="divider"></li>
禁用的菜单项:<li class="disabled"><a href="#">Disabled link</a></li>
方法：$('.dropdown-toggle').dropdown('toggle')
事件：跟modal一样

bootstrap这种组件支持data和js两种调用方式：一般情况下可以使用data，如果点击之后又后续操作的话，需要使用js。

导航

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="myTabs">
      <li role="presentation" class="active"><a href="#home" id="home-tab" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">1</div>
      <div role="tabpanel" class="tab-pane" id="profile">...</div>
      <div role="tabpanel" class="tab-pane" id="messages">...</div>
      <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>

  </div>

胶囊：.nav-pills
堆叠：.nav-stacked
两端对齐：.nav-justified
方法：$('#myTabs li:eq(2) a').tab('show')
事件：跟modal一样

警告框

<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too <a href="#" class="alert-link">good</a>.
  </div>

可关闭的警告框
警告框中的链接
.success .info .warning .danger

进度条

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
      <span class="">60% Complete</span>
    </div>
  </div>

不加提示数字：span.sr-only
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性
min-width: 2em;
min-width: 2em; width: 2%;
不同的情景：给div.progress-bar添加.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger

列表组

加入徽章：<span class="badge">4</span>

在文字前后都行

全是链接的列表组

<div class="list-group">
    <a href="#" class="list-group-item active">
      Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>

全是按钮的列表组

<div class="list-group">
    <button type="button" class="list-group-item">Cras justo odio</button>
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item">Morbi leo risus</button>
    <button type="button" class="list-group-item">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item">Vestibulum at eros</button>
  </div>

被禁用的条目：给.list-group-item添加.disabled
不同情景：给.list-group-item添加.list-group-item-success .list-group-item-info .list-group-item-warning .list-group-item-danger
自定义内容：有专门的header和text

<div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">List group item heading</h4>
      <p class="list-group-item-text">...</p>
    </a>
  </div>

面板

<div class="panel panel-success">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
    <div class="panel-footer">Panel footer</div>
  </div>

由三部分组成.heading .body .footer

有四种情景
面板内可添加表格、列表组，作为.panel的直接子元素。
well

<div class="well">...</div>

调整大小：.well-lg .well-sm
轮播

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/post.jpg" alt="First slide">
        <div class="carousel-caption">
          <h3>h1</h3>
          <p>p1</p>
        </div>
      </div>
      <div class="item">
        <img src="images/post.jpg" alt="Second slide">
        <div class="carousel-caption">
          <h3>h2</h3>
          <p>p2</p>
        </div>
      </div>
      <div class="item">
        <img src="images/post.jpg" alt="Third slide">
        <div class="carousel-caption">
          <h3>h3</h3>
          <p>p3</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

要把fonts添加到css下
需要修改id

方法

.carousel({ interval: 2000})
.carousel('cycle')
.carousel('pause')
.carousel(number)
.carousel('prev')
.carousel('next')

事件

`slide.bs.carousel`当调用 slide 实例方法时立即触发该事件。
`slid.bs.carousel`当轮播完成幻灯片过渡效果时触发该事件。

页脚

html

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

css

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.container .text-muted {
  margin: 20px 0;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

bootstrap

栅格系统

实例精选

组件

猜你喜欢

热点阅读