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. Django admin argument to reversed() must be a sequence

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

  2. Firefox火狐 浏览器接口调试工具 JSON 格式化

    作为一名“IT界”的淫才,还是主攻Web端的淫才,相信大家经常会联调各种接口! 如今APP猖狂的年代接口联调更为频繁,当然我们常用于Firefox火狐 浏览器,所以这里主要讲Firefox火狐 浏览器 ...

  3. webgl之观察三维空间

    在之前的教程中,我们已经接触到了3d的基本应用,而这里,将会继续介绍两种不同的相机,即透视相机和正投影相机:还会学习设置相机的不同参数,这样就可以使场景以不同的角度显示出来. 一.正投影和透视投影概念 ...

  4. 生产者消费者模式中条件判断是使用while而不是if

    永远在循环(loop)里调用 wait 和 notify,不是在 If 语句现在你知道wait应该永远在被synchronized的背景下和那个被多线程共享的对象上调用,下一个一定要记住的问题就是,你 ...

  5. PLSQL Developer是什么？

    不多说,直接上干货! PLSQL Developer是一款可以帮助用户管理Oracle数据库开发存储程序单元的集成开发环境IDE,通过该软件,用户可以编辑.编译.纠正.测试.调试.优化.查询您的数据信 ...

  6. Spring总结 2.装配bean

    本随笔内容要点如下: bean的作用域 占位符 一.bean的作用域 在默认情况下,Spring管理的bean的单例的.也就是说,无论注入多少次,都是同一个bean对象.一般情况下,单例模式是足以应付 ...

  7. Linux cp 强制覆盖

     Linux下默认cp命令是有别名(alias cp='cp -i')的,无法强制覆盖,即使你用 -f 参数也无法强制覆盖文件,下面提供两种Linux下cp 覆盖方法. 1) 取消cp的alias,这 ...

  8. linux-openvpn

    1.安装openvpn 1)安装需要的依赖,需要用到epel源 #yum -y install  epel-release 修改epel.repo文件enabled=1 #yum install ea ...

  9. ZOJ 3960 What Kind of Friends Are You?（读题+思维）

    题目链接 :http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5592 Japari Park is a large zoo hom ...

  10. vs2017调试浏览器闪退

    工具>选项>项目和解决方案> Web项目",取消选中"浏览器窗口关闭时停止调试器"