首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 19, 2016

下载地址：http://v3.bootcss.com/getting-started/#download

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

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>

可视化布局：

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

代码如下：

<!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>

效果如下：

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

相关参考：

http://www.runoob.com/bootstrap/bootstrap-environment-setup.html

http://www.runoob.com/try/bootstrap/layoutit/

以上所述是小编给大家介绍的BootStrap入门教程(一)之可视化布局，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

Redchar

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
javascript call方法使用说明
Jan 11 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
Node.js的基本知识简单汇总
Sep 19 #Javascript
React实现双向绑定示例代码
Sep 19 #Javascript
vue从使用到源码实现教程详解
Sep 19 #Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 #Javascript
jquery事件绑定解绑机制源码解析
Sep 19 #Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 #Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 #Javascript
磁盘管理(1) 条码(1) 太阳码(1) Post(1) 目录管理(1) 日志(1) 二维码(2) Get(1) 延时任务(1) Word(2)
You might like
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
购买英国原创艺术：Art Gallery
2018/08/25 全球购物
印度排名第一的蛋糕、鲜花和礼品送货：Winni
2019/08/02 全球购物
工作态度检讨书
2014/02/11 职场文书
校庆筹备方案
2014/03/30 职场文书
中学教师师德承诺书
2014/05/23 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
Nginx配置https的实现
2021/11/27 Servers
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
Python四款GUI图形界面库介绍
2022/06/05 Python