首页
所有分类
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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
Angular2安装angular-cli
May 21 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 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) hook(1) dict(1) 数据备份(2) Vite(1) expdp(1) Foreign Key(1) 外键约束(1)
You might like
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
泰国国际航空公司官网：Thai Airways International
2019/12/04 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
MySQL查询日期时间
2022/05/15 MySQL