脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 可视化布局

BootStrap入门教程(一)之可视化布局

 更新时间：2016年09月19日 09:40:09   作者：Redchar  
这篇文章主要介绍了bootstrap可视化布局入门教程的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧

下载地址：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入门教程(一)之可视化布局，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JavaScript开发中需要搞懂的字符编码总结

    JavaScript开发中需要搞懂的字符编码总结

    字符集就是字符的集合，字符编码则代表字符集的实际编码规则，是用于计算机解析字符的。本文为大家整理了JavaScript开发中需要搞懂的字符编码，希望对大家有所帮助
    2023-02-02
  • js判断为空Null与字符串为空简写方法

    js判断为空Null与字符串为空简写方法

    最近开始研究JavaScript的简写方法，下面就是有关判断为空的简写方法
    2014-02-02
  • JS小知识之如何将CSV转换为JSON字符串

    JS小知识之如何将CSV转换为JSON字符串

    CSV文件一般是以逗号为分隔值的文件(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本),下面这篇文章主要给大家介绍了JS小知识之如何将CSV转换为JSON字符串的相关资料,需要的朋友可以参考下
    2023-06-06
  • JavaScript对象原型链原理详解

    JavaScript对象原型链原理详解

    这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JS异步宏队列微队列原理详解

    JS异步宏队列微队列原理详解

    这篇文章主要介绍了JS异步宏队列微队列原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • javascript div 遮罩层封锁整个页面

    javascript div 遮罩层封锁整个页面

    在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。
    2009-07-07
  • JS 判断代码全收集

    JS 判断代码全收集

    js判断代码，比较全，大家可以看下代码，熟悉常见判断代码。
    2009-04-04
  • 图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

    图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

    这篇文章主要为大家介绍了图片旋转、鼠标滚轮缩放、镜像、切换图片js代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • uniapp开发微信小程序自定义顶部导航栏功能实例

    uniapp开发微信小程序自定义顶部导航栏功能实例

    uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发微信小程序自定义顶部导航栏功能的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 探索Emberjs制作一个简单的Todo应用

    探索Emberjs制作一个简单的Todo应用

    使用Emberjs制作一个简单的Todo应用,需要的朋友可以参考下
    2012-11-11

最新评论