zoukankan      html  css  js  c++  java
  • Bootstrap简介

    Bootstrap

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

    Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

    Bootstrap的源代码是使用less编写的

    Bootstrap的js效果都是基于jquery的,所以一般要先引入jquery代码

    使用:引入bootstrap.min.css文件

    简单案例1:

    --看看会有什么效果

    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>
    

    2、响应式表格 Bootstrap3.0新特效

    --这样做在小屏幕上看的时候会自动出现水平滚动条,大屏幕自动消失

    3、正文Bootstrap栅格系统bootstrap3.0使用了四种栅格选项来形成栅格系统

    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

    四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg

    xs(超小屏幕) sm(小屏幕) md(中屏幕) lg(大屏幕) 上课案例图片1

    案例1:

     <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 class="col-xs-12 col-sm-9 col-md-7 col-lg-8">
                    <p>Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加
                        系统会自动分为最多12列。它包含了易于使用的预定义classe</p>
                </div>
            </div>
       </div>
    

    上述案例:在屏幕尺寸大于

    案例2:作出我们经典的上中下样式网页

     <div class="container">
            <div class="row">
              <div class="col-lg-12 header"></div>
            </div>
           <div class="row">
               <div class="col-lg-3 left"></div>
               <div class="col-lg-6 mid"></div>
               <div class="col-lg-3 right"></div>
           </div>
           <div class="row">
               <div class="col-lg-12 footer"></div>
           </div>
       </div>
    

    这句代码做什么呢

    回顾开发要领

    <div class="container">提供一个让网页居中的容器
     <div class="row">设置行,宽度固定
     <div class="col-lg-3 left"></div>---设置里边列占用的宽度
    

    两个特殊的地方值得我们注意 Bootstrap重新定义了标题,采用了半加粗的字体 行高都采用了1.1倍 字体默认设置为14px

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

    4、表单

    <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>
    

    紧凑样式/内连样式 如果需要做成一行,并且有合适的间距,并且可以使用不同尺寸的显示

    <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>
    

    5、按钮

    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=" 1000px;background-color: red">链接</button>
    
    不可点击状态
    <button type="button" class="btn btn-warning" disabled="disabled">警告</button>
    <button type="button" class="btn btn-danger ">危险</button>
    

    6、图片

    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">——用于构建圆角的图片  
    

    7、响应式工具——具体见API

    <div class="toolbar hidden-xs hidden-sm"></div>——
    工具栏类容在校窗口或者超小窗口不可见
    <button class="visible-md visible-lg">click me</button>
    只在中等窗口或者打窗口显示
    

    8、Bootstrap常用组件

    (1)按钮组

    <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>
    

    (1-1)修改尺寸

    <div class="btn-group btn-group-lg">...</div>
    <div class="btn-group">...</div>
    <div class="btn-group btn-group-sm">...</div>
    <div class="btn-group btn-group-xs">...</div>
    

    (1-2)垂直

    <div class="btn-group-vertical">
      ...
    </div>
    

    (2、)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>
    

    (3、)导航组件

    胶囊导航-纵向胶囊-面包屑
    

    (3-1)普通

    <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>  
    

    (3-2)胶囊

    <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>
    

    (3-3)Pills 可以竖直堆叠。只要加上.nav-stacked。

    (3-4)两端对齐

    <ul class="nav nav-tabs nav-justified">
      ...
    </ul>
    <ul class="nav nav-pills nav-justified">
      ...
    </ul>
    

    (3-5)禁用连接

    <ul class="nav nav-pills">
      ...
      <li class="disabled"><a href="#">Disabled link</a></li>
      ...
    </ul>
    

    (3-6)面包屑导航

    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
    </ol>
    

    (4、)分页

    <ul class="pagination">
      <li><a href="#">&laquo;</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="#">&raquo;</a></li>
    </ul>
    

    (5、)禁用

    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
      ...
    </ul>
    

    (6、)尺寸

    <ul class="pagination pagination-lg">...</ul>
    <ul class="pagination">...</ul>
    <ul class="pagination pagination-sm">...</ul>
    

    (7、)标签

    <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>
  • 相关阅读:
    LintCode "Maximum Gap"
    LintCode "Wood Cut"
    LintCode "Expression Evaluation"
    LintCode "Find Peak Element II"
    LintCode "Remove Node in Binary Search Tree"
    LintCode "Delete Digits"
    LintCode "Binary Representation"
    LeetCode "Game of Life"
    LintCode "Coins in a Line"
    LintCode "Word Break"
  • 原文地址:https://www.cnblogs.com/haonantong/p/4684414.html
Copyright © 2011-2022 走看看