下载地址：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. Linux_解决nohup命令生成的多余的大日志文件

    解决nohup命令生成的多余的大日志文件 经常使用命令 nohup /usr/bin/php /srv/www/update.php & 可以让它在后台安静的进行,但是有一个烦恼就是,它会生成 ...

  2. NodeJS优缺点及适用场景讨论

    概述:NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一. N ...

  3. JAVA复制网络图片到本地

    import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.Out ...

  4. hdu1240 bfs 水题

    原题链接 思路:水题,直接搜 #include "map" #include "queue" #include "math.h" #incl ...

  5. vsphere平台为win系统动态扩展磁盘

    1.关闭win虚拟机 2.在vcenter管理中加大磁盘空间 3.开启win虚拟机(此时磁盘并没有加大) 4.打开cmd命令行: 进入分区管理--->查看磁盘--->选择磁盘---> ...

  6. Jquery广告浮动效果小案例

    导入<script src="<%=path%>/html5/js/jquery.js"></script>文件 <SCRIPT type ...

  7. MySQL数据恢复和复制对InnoDB锁机制的影响

    MySQL通过BINLOG记录执行成功的INSERT,UPDATE,DELETE等DML语句.并由此实现数据库的恢复(point-in-time)和复制(其原理与恢复类似,通过复制和执行二进制日志使一 ...

  8. oracle结构与安全

    从宏观上来看:oracle数据库服务器主要有数据库和实例组成. 在orale数据库服务器中,首先会产生一个实例,通过实例访问一个数据库. 一个实例对应着一个数据库. oracle 数据库在逻辑上是按层 ...

  9. HTTP 战役 与 历史

    导火线1992年,有一家公司Nombas 开发了一种叫C--的嵌入式脚本语言,后来觉得名字比较晦气,最终改名为scriptEase.而这种可以嵌入网页中的脚本的理念,成为日后移动互联网蓬勃发展的一块重 ...

  10. mysql批量替换指定字符串

    将字段title中的abc替换为123 UPDATE `table1` SET `title` = replace(title, 'abc', '123') WHERE `typeid` =18;