Bootstrap(一)

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







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

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

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

    <div class="input-group">

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

     <h3>表单</h3>
    <form>
    <div class="form-group">

      <input type="email" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">

      <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">&times;</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">

</button>

<button type="button" class="btn btn-default btn-lg">
   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

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

Bootstrap, 

相关文章