码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 基本用法

时间:2015-06-22 13:41:59      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:

使用bootstrap框架的步骤

  1、引用bootstrap的css框架,这样可以通过bootstrap来布局;

    <link rel="stylesheet" href="../css/bootstrap.min.css">;

  2、引用bootstrap的js框架,这样可以使用;

    注意:因为bootstrap的js框架是基于jquery而写的,因此要引用bootstrap的js框架的时候必须先引入jquery,这样才能使用bootstrap的框架;

    <script src="../js/jquery-1.11.2-min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

bootstrap的一些常用的布局:

  栅格化布局:

  Bootstrap栅格系统的工作原理:

  • “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 使用“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

表格:

  基本案例

    为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能  会影响例如日历和日期选择之类的插件,所以我们选择将其样式独立出来。

    <table class="table"> ... </table>

  条纹状表格

  利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

    <table class="table table-striped"> ... </table>

  带边框的表格

  利用.table-bordered为表格和其中的每个单元格增加边框。

  <table class="table table-bordered"> ... </table>

  鼠标悬停

  利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

  <table class="table table-hover"> ... </table>

  紧缩表格

  利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

  <table class="table table-condensed"> ... </table>

  状态class

  通过这些状态class可以为行货单元格设置颜色。

 

Class描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
</tr>

  

  响应式表格

  将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

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

  单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control<input><textarea><select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好  的排列。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

  

  使用下面列出的class可以快速创建一个带有样式的按钮。

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

  尺寸

  需要让按钮具有不同尺寸吗?使用.btn-lg.btn-sm.btn-xs可以获得不同尺寸的按钮。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

  链接元素

可以为<a>添加.active class。

  <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

   <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

可作按钮使用的HTML标签

  可以为<a><button><input>元素添加按钮class。

  

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

这些都为bootstrap的css样式,通过在class中添加这些样式名,便可以引用这些样式;

Bootstrap 基本用法

标签:

原文地址:http://www.cnblogs.com/wanb/p/4593149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!