下载地址：http://v3.bootcss.com/getting-started/#download

 

HTML模板：

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

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

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

      <!--[if lt IE 9]>

         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

      <![endif]-->

   </head>

   <body>

      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="https://code.jquery.com/jquery.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="js/bootstrap.min.js"></script>

   </body>

</html>

　　在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

Bootstrap CDN推荐

　　百度的静态资源库的 CDN 服务，引入代码如下：

<!-- 新 Bootstrap 核心 CSS 文件 --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

可视化布局：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>bootstraptest</title>

    <!-- 新 Bootstrap 核心 CSS 文件 --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container">

    <div class="row clearfix">

        <div class="col-md-12 column">

            <div class="row">

                <div class="col-md-4">

                    <div class="thumbnail">

                        <img alt="300x200" src="img/ad.jpg" class="img-responsive" />

                        <div class="caption">

                            <h3>

                                Thumbnail label

                            </h3>

                            <p>

                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                            </p>

                            <p>

                                 <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>

                            </p>

                        </div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="thumbnail">

                        <img alt="300x200" src="v3/default5.jpg" />

                        <div class="caption">

                            <h3>

                                Thumbnail label

                            </h3>

                            <p>

                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                            </p>

                            <p>

                                 <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>

                            </p>

                        </div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="thumbnail">

                        <img alt="300x200" src="v3/default6.jpg" />

                        <div class="caption">

                            <h3>

                                Thumbnail label

                            </h3>

                            <p>

                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                            </p>

                            <p>

                                 <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>

                            </p>

                        </div>

                    </div>

                </div>

            </div> <a id="modal-989545" href="#modal-container-989545" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a>

            <div class="modal fade" id="modal-container-989545" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                            <h4 class="modal-title" id="myModalLabel">

                                标题

                            </h4>

                        </div>

                        <div class="modal-body">

                            内容...asdfasdf

                        </div>

                        <div class="modal-footer">

                             <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button>

                        </div>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h3 class="panel-title">

                        Panel title

                    </h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

                <div class="panel-footer">

                    Panel footer

                </div>

            </div>

            <div class="page-header">

                <h1>

                    Example page header <small>Subtext for header</small>

                </h1>

            </div>

            <div class="btn-group">

                 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em> 左</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em> 中</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em> 右</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> 全</button>

            </div>

            <div class="row clearfix">

                <div class="col-md-12 column">

                    <div class="jumbotron">

                        <h1>

                            Hello, world!

                        </h1>

                        <p>

                            This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

                        </p>

                        <p>

                             <a class="btn btn-primary btn-large" href="#">Learn more</a>

                        </p>

                    </div>

                </div>

            </div>

            <nav class="navbar navbar-default" role="navigation">

                <div class="navbar-header">

                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a>

                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav">

                        <li class="active">

                             <a href="#">Link</a>

                        </li>

                        <li>

                             <a href="#">Link</a>

                        </li>

                        <li class="dropdown">

                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>

                            <ul class="dropdown-menu">

                                <li>

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

                                </li>

                                <li>

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

                                </li>

                                <li>

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

                                </li>

                                <li class="divider">

                                </li>

                                <li>

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

                                </li>

                                <li class="divider">

                                </li>

                                <li>

                                     <a href="#">One more separated link</a>

                                </li>

                            </ul>

                        </li>

                    </ul>

                    <form class="navbar-form navbar-left" role="search">

                        <div class="form-group">

                            <input class="form-control" type="text" />

                        </div> <button type="submit" class="btn btn-default">Submit</button>

                    </form>

                    <ul class="nav navbar-nav navbar-right">

                        <li>

                             <a href="#">Link</a>

                        </li>

                        <li class="dropdown">

                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>

                            <ul class="dropdown-menu">

                                <li>

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

                                </li>

                                <li>

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

                                </li>

                                <li>

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

                                </li>

                                <li class="divider">

                                </li>

                                <li>

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

                                </li>

                            </ul>

                        </li>

                    </ul>

                </div>

            </nav>

            <h2>

                Heading

            </h2>

            <p>

                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

            </p>

            <p>

                 <a class="btn" href="#">View details »</a>

            </p>

            <div class="jumbotron">

                <h1>

                    Hello, world!

                </h1>

                <p>

                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

                </p>

                <p>

                     <a class="btn btn-primary btn-large" href="#">Learn more</a>

                </p>

            </div> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890</address>

            <div class="btn-group">

                 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em> 左</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em> 中</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em> 右</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> 全</button>

            </div>

        </div>

    </div>

    <div class="row clearfix">

        <div class="col-md-4 column">

        </div>

        <div class="col-md-4 column">

            <h2>

                Heading

            </h2>

            <p>

                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

            </p>

            <p>

                 <a class="btn" href="#">View details »</a>

            </p>

        </div>

        <div class="col-md-4 column">

            <h2>

                Heading

            </h2>

            <p>

                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

            </p>

            <p>

                 <a class="btn" href="#">View details »</a>

            </p>

        </div>

    </div>

</div>

</body>

</html>

效果如下：

参考：

http://www.runoob.com/bootstrap/bootstrap-environment-setup.html

http://www.runoob.com/try/bootstrap/layoutit/

bootstrap入门-1.可视化布局的更多相关文章

  1. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  2. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  3. 对于bootstrap可视化布局设计可以参考2017.6.2

    http://www.layoutit.cn/v3/index.html  可视化布局链接,拖好控件自动生成代码非常方便 http://www.jq22.com/jquery-info14044  这 ...

  4. Bootstrap入门（二）栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  5. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  6. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  7. Bootstrap入门（九）组件3：按钮组

    Bootstrap入门(九)组件3:按钮组   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...

  8. Bootstrap入门（五）表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  9. Bootstrap-Other：可视化布局

    ylbtech-Bootstrap-Other:可视化布局 1.返回顶部 1. 2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. http://www.runoob.co ...

随机推荐

  1. 【BZOJ】2697: 特技飞行

    题意 \(k(1 \le k \le 300)\)种物品,价值分别为\(c_i(0 \le c_i \le 1000)\).有\(n(1 \le n \le 1000)\)分钟,每分钟可以选择一个物品 ...

  2. Codeforces Round #157 (Div. 2) D. Little Elephant and Elections(数位DP+枚举)

    数位DP部分,不是很难.DP[i][j]前i位j个幸运数的个数.枚举写的有点搓... #include <cstdio> #include <cstring> using na ...

  3. Android -- 简单广播接收与发送（2）--动态注册广播接收器

    1. 效果图

  4. vue.js中v-for的使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  5. ffmpeg入门

    总入口 http://blog.csdn.net/leixiaohua1020/article/details/15811977 各结构体介绍 http://blog.csdn.net/leixiao ...

  6. MongoDB 用户配置

    ====[安装]====DOS下切换到文件所在盘符 例如 D:\MongoDB\bin设置数据库保存位置 mongod.exe --dbpath D:\MongoDB\Data [--auth]//用 ...

  7. PHP zendframework phpunit 深入

    安装包管理 curl -sS https://getcomposer.org/installer | /usr/local/php/bin/php 将证书安装到 ~$ mkdir ~/tools/ht ...

  8. Linux下rz命令使用的实例详解

    Linux中rz命令和sz命令都可用于文件传输,而rz命令主要用于文件的上传,下面将通过几个实例来给大家详细介绍下Linux下rz命令的用法,一起来学习下吧. rz命令可以批量上传文件,当然也可上传单 ...

  9. ado.net 连接，删除，添加

    ado.net数据库访问技术将数据库中的数据,提取到内存中,展示给用户看还可以将内存中的数据写入数据库中去 并不是唯一的数据库访问技术,但是它是最底层的数据库访问技术 数据库: create data ...

  10. 32位的Win7系统下安装64位的Sql Sever？

    来自:http://zhidao.baidu.com/link?url=nQBoaLgoOyYCUdI7V4WZCMlTW3tKscdkOnLTIvlYtPpwoVhQkSahq44HeofBfzFT ...