下载地址：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. 百度mobile UI组件GMU demo学习1-结构和初始化

    移动web现在已经是zepto的天下,但是一直找不到合适UI库,找了一段时间,终于找到了百度的ui库gum和inter 的 appframework UI库 相比之下,百度的UI库更接地气,配合百度强 ...

  2. UVA 10780 - Again Prime? No Time.

    题目链接 思路好想,注意细节.错了很多次. #include <cstdio> #include <cstring> #include <string> #incl ...

  3. 如何将一个对象存到网页中并在js中使用

    需求:希望在js中使用Controller传过来的对象,特别是对象里存有list的数据. 不希望循环使用隐藏域. 解决办法:在View中使用Json.Net序列化: @{ string jsonStr ...

  4. BZOJ4521: [Cqoi2016]手机号码

    Description 人们选择手机号码时都希望号码好记.吉利.比如号码中含有几位相邻的相同数字.不含谐音不 吉利的数字等.手机运营商在发行新号码时也会考虑这些因素,从号段中选取含有某些特征的号 码单 ...

  5. App如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸？

    来自//www.cocoachina.com/ 初代 iPhone 2007 年,初代 iPhone 发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到 ...

  6. Oracle中"行转列"的实现方式

    在报表的开发当中,难免会遇到行转列的问题. 以Oracle中scott的emp为例,统计各职位的人员在各部门的人数分布情况,就可以用"行转列": scott的emp的原始数据为: ...

  7. 一个资深iOS开发者对于React Native的看法

    一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javasc ...

  8. JQuery基本方法介绍和使用

    1.属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 常用于表格鼠标移动效果 $(document).ready(function(){ //& ...

  9. webapp 公共样式

    html{ font-size: 62.5%;}@media only screen and (min-width: 481px) { html { font-size:94%!important } ...

  10. .net 实现Office文件预览,word文件在线预览、excel文件在线预览、ppt文件在线预览

    转自源地址:http://www.cnblogs.com/GodIsBoy/p/4009252.html,有部分改动 使用Microsoft的Office组件将文件转换为PDF格式文件,然后再使用pd ...