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>

Bootstrap（一）的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. jq 复习帖子 常用操作

     1绝对定位(abs)与相对定位(relative)    区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把其它的层遮罩住    绝对定位就 ...

  2. vue项目在IE9下报错 “requestAnimationFrame”未定义

    在main.js里面添加: (function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var ...

  3. tkinter如何设置界面消失 当制作一个登陆界面时，登陆成功之后，如何让登陆界面本身消失

    tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 if querySQL.checkAll():#用户名和密码都输入正确 self.root.withdraw ...

  4. Django admin argument to reversed() must be a sequence

    django执行反序列化操作老是报Django admin argument to reversed() must be a sequence 切记查看所有的路由设置,主路由(urls)和分的都要修改 ...

  5. IdentityServer4 Hybrid 模式

    原文参考:Switching to Hybrid Flow and adding API Access back 接上篇:IdentityServer-Protecting an API using ...

  6. jQuery WeUI实现分页功能

    使用前记得先引入:weui.min.css.jquery-weui.min.css.jquery-weui.min.js 第一步:将下面的代码放在body结束标签上面(这个位置可以自己按需求放) &l ...

  7. 如何查找SHELL的进程号并杀死

    一.shell查找进程并杀死 #!/bin/sh tomcat_id=`ps -ef | grep tomcat | grep -v "grep" | awk '{print $2 ...

  8. MVC源码分析 - ModelBinder绑定 / 自定义数据绑定

    这几天老感觉不对, 总觉得少点什么, 今天才发现, 前面 3 里面, 在获取Action参数信息的时候,  少解析了. 里面还有一个比较重要的东西. 今天看也是一样的. 在 InvokeAction( ...

  9. Apache 源码安装

    8.20]# make[root@yahoo pcre-8.20]# make install 二.安装apache1.下载httpd-2.4.3.tar.gz,地址是:http://httpd.ap ...

  10. windows系统 PHP安装Redis扩展

    cmd开启/关闭redis redis所在路径: D:\redis\Redis-x64-3.2.100 启动: start cmd /k "cd /d D:\redis\Redis-x64- ...