Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

使用感觉简约大气便捷，扁平化设计。好多好多CSS、JS....总有你心仪的那一款！喜欢就上官网找，那里更丰富呦！

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

  </head>

  <body>

      <h3>导航栏</h3>

    <nav class="navbar navbar-inverse navbar-fixed-top">

        <div id="navbar" class="navbar-collapse collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#about">About</a></li>

            <li><a href="#contact">Contact</a></li>

            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li class="divider"></li>

                <li class="dropdown-header">Nav header</li>

                <li><a href="#">Separated link</a></li>

              </ul>

            </li>

          </ul>

        </div><!--/.nav-collapse -->

      </div>

    </nav>

    <h1>你好，bootstrap！</h1>

     <h3>图标</h3>

    <span class="glyphicon glyphicon-home"></span><br>

    <span class="glyphicon glyphicon-signal"></span>

    <span class="glyphicon glyphicon-cog"></span>

    <span class="glyphicon glyphicon-apple"></span>

    <span class="glyphicon glyphicon-trash"></span>

    <span class="glyphicon glyphicon-play-circle"></span>

    <span class="glyphicon glyphicon-headphones"></span>

    <span class="glyphicon glyphicon-send"></span>

    <h3>按钮</h3>

    <button type="button" class="btn btn-default">按钮</button>

    <button type="button" class="btn btn-primary">primary</button>

    <button type="button" class="btn btn-success">success</button>

    <button type="button" class="btn btn-info">info</button>

    <button type="button" class="btn btn-warning">warning</button>

    <button type="button" class="btn btn-danger">danger</button>

    <h3>按钮尺寸</h3>

    <button type="button" class="btn btn-default">按钮</button>

    <button type="button" class="btn btn-primary btn-lg">primary</button>

    <button type="button" class="btn btn-success btn-sm">success</button>

    <button type="button" class="btn btn-info btn-xs">info</button>

    <h3>把图标显示在按钮里</h3>

    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;按钮</button>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <h3>下拉菜单</h3>

    <div class="dropdown">

      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">

        Dropdown

        <span class="caret"></span>

      </button>

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

      </ul>

    </div>

     <h3>输入框</h3>

    <div class="input-group">

      <span class="glyphicon glyphicon-user"></span>

      <input type="text" placeholder="username">

    </div>

    <div class="input-group">

      <span class="glyphicon glyphicon-lock"></span>

      <input type="password" placeholder="password">

    </div>

     <h3>表单</h3>

    <form>

    <div class="form-group">

      <span class="glyphicon glyphicon-user"></span>

      <input type="email" id="exampleInputEmail1" placeholder="Enter email">

    </div>

    <div class="form-group">

      <span class="glyphicon glyphicon-lock"></span>

      <input type="password" 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>

 <h3>警告框</h3>

    <div class="alert alert-warning alert-dismissible" role="alert">

       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

       <strong>Warning!</strong> Better check yourself, you're not looking too good.

    </div>

    <div class="alert alert-success" role="alert">

        <a href="#" class="alert-link">success!</a>

    </div>

    <div class="alert alert-info" role="alert">

        <a href="#" class="alert-link">info!</a>

    </div>

    <div class="alert alert-warning" role="alert">

        <a href="#" class="alert-link">warning!</a>

    </div>

    <div class="alert alert-danger" role="alert">

        <a href="#" class="alert-link">danger!</a>

    </div>

     <h3>进度条</h3>

    <div class="progress">

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

        70%

      </div>

    </div>

    <table class="table table-striped">

          <th>

            <td>NAME</td>

            <td>AGE</td>

            <td>SEX</td>

            <td>aaa</td>

          </th>

        <tr>

            <td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td>

        </tr>

        <tr>

            <td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td>

        </tr>

        <tr>

            <td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td>

        </tr>

        <tr>

            <td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td>

        </tr>

        <tr class="active"><td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td></tr>

        <tr class="success"><td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td></tr>

        <tr class="warning"><td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td></tr>

        <tr class="danger"><td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td></tr>

        <tr class="info"><td>XIONG</td>

            <td>23</td>

            <td>男</td>

            <td>183</td></tr>

    </table>

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

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>

<button type="button" class="btn btn-default btn-lg active">Button</button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

<img src="..." alt="..." class="img-rounded">方

<img src="..." alt="..." class="img-circle">圆

<img src="..." alt="..." class="img-thumbnail">边框

<p class="bg-primary">.dddddddd..</p>

<p class="bg-success">ffffffff...</p>

<p class="bg-info">...eeeeeeeeeee</p>

<p class="bg-warning">..wwwwwwwwww.</p>

<p class="bg-danger">...gggggggggg</p>

<button type="button" class="btn btn-default" aria-label="Left Align">

  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>

</button>

<button type="button" class="btn btn-default btn-lg">

  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star

</button>

<div class="dropup">

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    Dropup

    <span class="caret"></span>

  </button>

  <!-- <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">

    <li><a href="#">Action</a></li>

    <li><a href="#">Another action</a></li>

    <li><a href="#">Something else here</a></li>

    <li role="separator" class="divider"></li>

    <li><a href="#">Separated link</a></li>

  </ul> -->

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">

      <li><a href="#">Regular link</a></li>

      <li class="disabled"><a href="#">Disabled link</a></li>

      <li><a href="#">Another link</a></li>

    </ul>

</div>

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  </body>

</html>

最新文章

  1. OC编程之道-创建对象之单例模式
  2. C# 程序中的变量
  3. 谈谈Javascript的this关键字(this is not this)
  4. 利用PPT的WebBroswer控件助力系统汇报演示
  5. 【JS Note】字符串截取
  6. ftp两种传输方式区别
  7. [转载]启用 VIM 中的 Python 自动补全及提示功能
  8. codeforces 633C. Spy Syndrome 2 hash
  9. POJ 3311 Hie with the Pie （BFS+最短路+状态压缩）
  10. typedef如何显示变量类型名
  11. SpringMVC(五)：@RequestMapping下使用@RequestParam绑定请求参数值
  12. POJ - 3264——Balanced Lineup（入门线段树）
  13. C语言入门（1）
  14. 解决Nginx出现403 forbidden
  15. python_day1 条件语句
  16. 数据库学习之数据库增删改查（另外解决Mysql在linux下不能插入中文的问题)(二)
  17. Node.js相关——package概念及NPM
  18. json数据在前端（javascript）和后端（php）转换
  19. unity3d-绘制贴图
  20. maven工程下的“run as application”

热门文章

  1. flaks___git
  2. WebDriver高级应用实例（3）
  3. 10-05 Java 内部类概述和讲解
  4. 解决应用商店错误代码0x80072efd、0x80131505的方法
  5. Java 内存分配及垃圾回收机制初探
  6. C++中：默认构造函数、析构函数、拷贝构造函数和赋值函数——转
  7. Mac终端配置，DIY你的Terminal （iTerm 2 + Oh My Zsh）
  8. [java初探05]__数组的简单认识及Arrays类的常用方法
  9. MVC源码分析 - Action/Result 过滤器(续)
  10. Web前后端分离知识整理