bootstrap框架

来源：互联网发布：微分销商城源码编辑：程序博客网时间：2024/06/07 23:44

1.Bootstrap概述
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

>###2.使用：
>先引入bootstrap.css文件
>table-striped可以使奇数行的背景设为灰色。
>table-bordered可以使边框显示。
>table-hover可以使鼠标悬停的行的背景变为灰色
>table-condensed可以使行间距变小。
>
    <table class="table">
        <tr>
            <td class="active">姓名</td>
            <td class="success">年龄</td>  成功或积极动作
            <td class="warning">职业</td> 注意
        </tr>
        <tr>
            <td class="danger">张三</td> 危险
            <td>18</td>
            <td>程序员</td>
        </tr>
    </table>

>###3.响应式表格 Bootstrap3.0新特效
>
    <div class="table-responsive"></div>

>###4.正文Bootstrap栅格系统
>
bootstrap3.0使用了四种栅格选项来形成栅格系统
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
>
四种栅格选项，他们分别是col-xs ,col-sm,col-md,col-lg
>
xs(超小屏幕)
sm(小屏幕)
md(中屏幕)
lg(大屏幕)

     <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-5 col-lg-4">
                    <h1>LESS</h1>
                    <h1>SASS</h1>
                    <h1>bootstrap3.0</h1>
                </div>
            </div>
       </div>
>###5.回顾开发要领
>
    <div class="container">提供一个让网页居中的容器
    <div class="row">设置行，宽度固定
    <div class="col-lg-3 left"></div>---设置里边列占用的宽度

>###6.表单
>
    <form role="form" action="http://www.baidu.com">
     <div class="form-group">
      <label for="exampleInputEmail1">Email地址</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
     </div>
     <div class="form-group">
       <label>姓名</label>
       <input type="text" class="form-control" id="uName" placeholder="输入用户名">
     </div>
     <div class="form-group">
       <label for="exampleInputPassword1">密码</label>
       <input type="password" class="form-control" id="exampleInputPassword1" placeholder="输入密码">
       </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>

>###7.紧凑样式/内连样式
>
如果需要做成一行，并且有合适的间距，并且可以使用不同尺寸的显示
>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Email地址</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 记住我</label>
        </div>
        <button type="submit" class="btn btn-default">Sign in</button>
    </form>

>###8.按钮
>
Bootstrap提供了一些标准的按钮配合和大小调整方案
>
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-primary">主要</button>
    <button type="button" class="btn btn-success">成功</button>
    <button type="button" class="btn btn-info">信息</button>
    <button type="button" class="btn btn-warning">警告</button>
    <button type="button" class="btn btn-danger">危险</button>
    <button type="button" class="btn btn-link">链接</button>

>同时还提供了对按钮大小调节功能
>
btn-lg大按钮 ---标准按钮----btn-sm小按钮----btn-xs小按钮
>
    <button type="button" class="btn btn-primary btn-lg">主要</button>
    <button type="button" class="btn btn-success">成功</button>
    <button type="button" class="btn btn-info btn-sm">信息</button>
    <button type="button" class="btn btn-warning btn-xs">警告</button>
    <button type="button" class="btn btn-danger">危险</button>

>有时候我们需要一个占据一整行的按钮尤其是连接这里
>
    <button type="button" class="btn btn-warning  btn-block">警告</button>
    <button type="button" class="btn btn-danger btn-xs btn-block">危险</button>
    <button type="button" class="btn btn-link btn-block" style="width: 1000px;background-color: red">链接</button>

>不可点击状态
>
    <button type="button" class="btn btn-warning" disabled="disabled">警告</button>
    <button type="button" class="btn btn-danger ">危险</button>

>###9.图片
Bootstrap也对图片做了默认样式处理
主要包括圆角，原型，简介边框
>
    <img src="img/jay.jpg" class="img-circle">——用于构建圆形的图片
    <img src="img/jay.jpg" class="img-thumbnail">——用于添加简单的边框
    <img src="img/1.jpg" class="img-rounded">——用于构建圆角的图片

>###10.按钮组
>
    <div class="btn-group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
>修改尺寸
>
    <div class="btn-group btn-group-lg">...</div>
    <div class="btn-group btn-group-sm">...</div>
    <div class="btn-group btn-group-xs">...</div>

>垂直
>
    <div class="btn-group-vertical"></div>

>###11.input组件——输入框组
>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
>尺寸
>
    <div class="input-group input-group-lg">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="input-group input-group-sm">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>

>###12.导航组件
胶囊导航-纵向胶囊-面包屑
>普通
>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
    </ul>
>胶囊
>
    <ul class="nav nav-pills">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
    </ul>
    Pills 可以竖直堆叠。只要加上.nav-stacked。

>两端对齐
>
    <ul class="nav nav-tabs nav-justified"></ul>
    <ul class="nav nav-pills nav-justified"></ul>

>禁用连接
>
    <ul class="nav nav-pills">
      <li class="disabled"><a href="#">Disabled link</a></li>
    </ul>

>面包渣导航
>
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
    </ol>

>###13.分页
>
    <ul class="pagination">
      <li><a href="#">«</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>

>###14.禁用
>
    <ul class="pagination">
      <li class="disabled"><a href="#">«</a></li>
      <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    </ul>

>###15.尺寸
>
    <ul class="pagination pagination-lg">...</ul>
    <ul class="pagination">...</ul>
    <ul class="pagination pagination-sm">...</ul>

>###16.标签
>
    <span class="label label-default">Default</span>
    <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>
    <a href="#">Inbox <span class="badge">42</span></a>

0 0