下载地址：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. Pop3_解决PKIX：unable to find valid certification path to requested target 的问题

    最近有公司pop3协议接收pp邮箱出现异常,连不上服务器,错误内容: e: sun.security.validator.ValidatorException: PKIX path building ...

  2. 简单实现异步编程promise模式

    本篇文章主要介绍了异步编程promise模式的简单实现,并对每一步进行了分析,需要的朋友可以参考下 异步编程 javascript异步编程, web2.0时代比较热门的编程方式,我们平时码的时候也或多 ...

  3. js 获取中文的拼音

    es6 + 模块化封装 "use strict"; module.exports = { //参数,中文字符串 //返回值:拼音首字母串数组 makePy (str) { if ( ...

  4. centos重启不能自动联网的解决方法

    在命令行下输入 下面的ifcfg-eth0,eth0为我的网卡名字.机器之间不同,请先查看自己网卡的名字 vi /etc/sysconfig/network-scripts/ifcfg-eth0 进行 ...

  5. Web前端开发基础 第四课（CSS文字和段落排版）

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  6. C遇到的问题

    1. stdout-------printf输出到stdout,并在终端打印 stderr--------perror错误输出到stderr,并在终端打印 2. usleep(1)//代表一微妙 sl ...

  7. ARM的一些基本概念

    MPU介绍: mpu是一个芯片,重力加速器(加速度)和陀螺仪(角速度) iic总线.在板上有iic控制器 连接着 最多128个外设,每个外设有地址,可以通信. 寄存器: cpu中的寄存器是为了加快运算 ...

  8. codeforces575A Fibonotci

    题目大意:f[k]=f[k-1]*s[(n-1)%n]+f[(k-2)]*s[(k-2)%n];会修改某一位置的s值,但循环不变,求f[k]; 矩阵快速幂裸题,由于有修改,所以需要线段树优化 #inc ...

  9. BZOJ4443:[SCO2015]小凸玩矩阵

    题目大意:给一个N*M的矩阵,选出N个数,使得每行没列只选一个数,求第K大的数的最小值是多少? 二分答案,第k大的数<=x,则有N-k+1个数<=k,用二分图判定. #include< ...

  10. IOS第七天(5:UiTableView 汽车品牌,复杂模型分组展示,A-Z索要列表) (2015-08-05 14:03)

    复杂模型分组展示 #import "HMViewController.h" #import "HMCarGroup.h" #import "HMCar ...