下载地址：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. 【HDU】1517 A Multiplication Game

    http://acm.hdu.edu.cn/showproblem.php?pid=1517 题意:每次乘上2~9..p>=n时赢.. #include <cstdio> #incl ...

  2. BZOJ3625: [Codeforces Round #250]小朋友和二叉树

    Description 我们的小朋友很喜欢计算机科学,而且尤其喜欢二叉树.考虑一个含有n个互异正整数的序列c[1],c[2],...,c[n].如果一棵带点权的有根二叉树满足其所有顶点的权值都在集合{ ...

  3. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. TCP/IP基础知识

    TCP/IP基础知识 网络 TCP/IP 引言 本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容 TCP/IP ...

  5. SpringMVC+Thymeleaf如何处理URL中的动态查询参数

    1.使用一个Map<String, String>接收数据 When you request a Map annotated with @RequestParam Spring creat ...

  6. [CareerCup] 17.3 Factorial Trailing Zeros 求阶乘末尾零的个数

    LeetCode上的原题,讲解请参见我之前的博客Factorial Trailing Zeroes. 解法一: int trailing_zeros(int n) { ; while (n) { re ...

  7. 教你彻底解决css中设置z-index的值无效的问题

    在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件: 1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:rela ...

  8. linux文件描述符数量的坑

    ulimit -n  查看 单进程或线程,可打开的最大文件描述符数 通过ulimit -n 10240 设置文件描述符数: (当前shell生效,这真是个坑啊) 永久生效:(需要重启系统,也是个坑,好 ...

  9. java 极光推送

    Web.xml配置文件 <context-param> <param-name>contextConfigLocation</param-name> <par ...

  10. dede新建模型中自定义联动类别调用及修改方法

    搜索了好久,没找到一个好的方法,就凑活用这个方法吧.也许只有这个方法比较好 先在后台的“联动类别管理”里新增“类别组”,“类 别 名”填中文,“缓存组名”填英文字母. 在“分类名称”后面增加分类 然后 ...