准备工作：
下载bootstrap-3.0.0
新建HTML5页面
引入bootstrap最基础的css文件
引入jquery（在引入其他js之前，先引入jquery）
引入bootstrap的js文件
自定义一个custom.css文件，用来对bootstrap的某些样式进行重写
其它：支持移动设备的不同屏幕大小，提供响应式布局等。。。
主页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap V3 template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
<link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 导航：使用nav标签进行封装
navbar: it is assigned to the nav element which holds the entire navigation.
navbar-inverse : change the default color of the navigation bar dark instead of the default lighter one
navbar-fixed-top : makes sure that the navbar stays fixed in the top position when we scroll down our HTML page
role="navigation" : for accessibility purpose
-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--
使用一个无序列表<ul>封装导航
class="nav navbar-nav" : 将列表横向排列
-->
<ul class="nav navbar-nav">
<!--
引入LOGO图片，点击图片跳转到一个新的页面
class="navbar-brand" ： used to present the brand name
-->
<li>
<a href="new.html" class="navbar-brand">
<img src="../../image/logo.png">
</a>
</li>
<!-- 主页链接 -->
<li class="active">
<a href="carousal.html">Home</a>
</li>
<!-- 其它链接 -->
<li>
<a href="price.html">Price</a>
</li>
<!-- 其它链接 -->
<li>
<a href="contact.html">Contact</a>
</li>
<!-- 使用<li>封装下拉列表 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social<b class="caret"></b>
</a>
<!-- 再使用<ul>封装下拉框中的选项 -->
<ul class="dropdown-menu">
<li class="socials">
<a href="https://twitter.com/share" class="twitter-share-button">Google</a>
</li>
<li class="socials">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</li>
</ul>
</li>
</ul>
</nav>
<!--//导航结束 -->
<!-- 【在导航条下面显示图片===旋转木马】-->
<!-- 旋转木马 -->
<!--
通过DIV作为容器封装所有内容，并使用样式class="carousel slide"
启动自动轮播：data-ride="carousel"
-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- 有序列表：设置状态灯，并指定默认激活项 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<!-- 设置旋转木马中的具体图片 -->
<div class="carousel-inner">
<!-- 使用div封装图片，应用样式class="item"，并指定默认显示的图片 -->
<!-- 第1张图 -->
<div class="item active">
<img src="../../image/computer.jpg" alt="..." class="img-responsive">
<!-- 图片上：文字说明，按钮 -->
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p>
<button class="btn btn-success btn-lg">第1张图片
</p>
</div>
</div>
<!-- 第2张图 -->
<div class="item">
<img src="../../image/mobile.jpg" alt="..." class="img-responsive">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p>
<button class="btn btn-success btn-lg">第2张图片
</p>
</div>
</div>
<!-- 第3张图 -->
<div class="item">
<img src="../../image/cloud1.jpg" alt="..." class="img-responsive">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p>
<button class="btn btn-success btn-lg">第3张图片
</p>
</div>
</div>
</div>
<!-- Controls -->
<!-- 图片向前 -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<!-- 图片向后 -->
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- //旋转木马结束 -->
<!-- 网格 -->
<div class="container">
<!-- 第一行 -->
<div class="row barone">
<div class="col-lg-4">
<h1>Frontend</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-lg-4">
<h1>Serverside</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-lg-4">
<h1>Databases</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- 第二行 -->
<div class="row barone">
<div class="col-lg-2">
<p><img src="http://www.w3resource.com/images/w3resourcelogo.gif"></p>
</div>
<div class="col-lg-2">
<p><img src="http://w3resource.com/update-images/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://w3resource.com/update-images/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="http://w3resource.com/update-images/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://w3resource.com/update-images/java.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://w3resource.com/update-images/postgresql.png"></p>
</div>
</div>
<div class="row barone">
<div class="col-lg-12">
<hr>
<p>Copyright@2013-14 by ToDo App.</p>
</div>
</div>
</div>
<!-- //网格结束 -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Price页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap V3 template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
<link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 导航：使用nav标签进行封装
navbar: it is assigned to the nav element which holds the entire navigation.
navbar-inverse : change the default color of the navigation bar dark instead of the default lighter one
navbar-fixed-top : makes sure that the navbar stays fixed in the top position when we scroll down our HTML page
role="navigation" : for accessibility purpose
-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--
使用一个无序列表<ul>封装导航
class="nav navbar-nav" : 将列表横向排列
-->
<ul class="nav navbar-nav">
<!--
引入LOGO图片，点击图片跳转到一个新的页面
class="navbar-brand" ： used to present the brand name
-->
<li>
<a href="new.html" class="navbar-brand">
<img src="../../image/logo.png">
</a>
</li>
<!-- 主页链接 -->
<li class="active">
<a href="carousal.html">Home</a>
</li>
<!-- 其它链接 -->
<li>
<a href="price.html">Price</a>
</li>
<!-- 其它链接 -->
<li>
<a href="contact.html">Contact</a>
</li>
<!-- 使用<li>封装下拉列表 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social<b class="caret"></b>
</a>
<!-- 再使用<ul>封装下拉框中的选项 -->
<ul class="dropdown-menu">
<li class="socials">
<a href="https://twitter.com/share" class="twitter-share-button">Google</a>
</li>
<li class="socials">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</li>
</ul>
</li>
</ul>
</nav>
<!--//导航结束 -->
<!-- 表格 -->
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy
now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Contact页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap V3 template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet" media="screen">
<!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
<link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">
<!-- google地图需要的js -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 导航：使用nav标签进行封装
navbar: it is assigned to the nav element which holds the entire navigation.
navbar-inverse : change the default color of the navigation bar dark instead of the default lighter one
navbar-fixed-top : makes sure that the navbar stays fixed in the top position when we scroll down our HTML page
role="navigation" : for accessibility purpose
-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--
使用一个无序列表<ul>封装导航
class="nav navbar-nav" : 将列表横向排列
-->
<ul class="nav navbar-nav">
<!--
引入LOGO图片，点击图片跳转到一个新的页面
class="navbar-brand" ： used to present the brand name
-->
<li>
<a href="new.html" class="navbar-brand">
<img src="../../image/logo.png">
</a>
</li>
<!-- 主页链接 -->
<li class="active">
<a href="carousal.html">Home</a>
</li>
<!-- 其它链接 -->
<li>
<a href="price.html">Price</a>
</li>
<!-- 其它链接 -->
<li>
<a href="contact.html">Contact</a>
</li>
<!-- 使用<li>封装下拉列表 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Social<b class="caret"></b>
</a>
<!-- 再使用<ul>封装下拉框中的选项 -->
<ul class="dropdown-menu">
<li class="socials">
<a href="https://twitter.com/share" class="twitter-share-button">Google</a>
</li>
<li class="socials">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</li>
</ul>
</li>
</ul>
</nav>
<!--//导航结束 -->
<!-- 联系我们 -->
<div class="container">
<h1>Mail us, call us or reach us in person</h1>
<!-- 网格 -->
<div class="row">
<!-- 第1列中封装form表单 -->
<div class="col-lg-4">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name"
placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<!-- 第2列：地址 -->
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Phone No: 1234567890</p>
</div>
<!-- 第3列：地图 -->
<div class="col-lg-4">
<div id="map_canvas"></div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
在自定义custom.css中，对默认的bootstrap样式进行修改
/*设置正文距离页面顶端80px，否则正文的前面部分将被导航条遮住*/
body {
padding-top: 80px;
}
.navbar-nav>li>a {
line-height: 50px; /*设置导航条中每个超链接的高度*/
font-size: 16px /*设置字号*/
}
.carousel-control .icon-prev,.carousel-control .icon-next {
font-size: 100px; /*前后翻页符号的字体大小*/
position: absolute; /*绝对定位*/
top: 200px /*离顶部的距离*/
}
/*图片上说明文字与顶部的绝对定位*/
.carousel-inner .item .carousel-caption {
position: absolute;
top: 200px
}
/*图片上指示器的与顶部的绝对定位*/
.carousel-indicators {
position: absolute;
top: 400px;
}
/*以下为设置表格样式*/
.container>h1 {
text-align: center;
}
th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
.badge {
background-color: #428bca;
color: #fff;
font-size: 22px;
}
/*google地图*/
#map_canvas {
width: 400px;
height: 400px;
}
相关推荐
Bootstrap3-Editable是一款基于Bootstrap框架的插件，主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据，而无需跳转到新的页面或者打开模态框，极大地提高了用户体验...
* 本js只是在bootstrap3-dialog的基础上进行的2次封装， * bootstrap3-dialog已经是非常好用了，调用也非常简单。 * 详情请访问：https://github.com/nakupanda/bootstrap3-dialog， * 这是原项目地址，可以自行...
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
总的来说，`bootstrap-table-fixed-columns`是一个增强Bootstrap表格功能的工具，它通过CSS和JavaScript实现了固定列效果，使得用户在处理大量数据时能更有效地导航。了解并熟练掌握这个扩展的使用，将有助于提升...
Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件，如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3，通过预定义的类名，开发者可以快速构建美观的用户界面。 ...
3. `bootstrap-5.3.0-alpha1-examples.zip`：这个文件可能包含了各种示例和模板，展示了Bootstrap组件的用法，帮助初学者快速上手，并为有经验的开发者提供灵感。 在Web开发中，Bootstrap的响应式设计意味着网站...
bootstrap-table-zh-CN.js,有需要就下载吧
bootstrap-table-export.js bootstrap-table表格导出js
压缩包里面有： 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
压缩包里面有： 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
bootstrap-table-editable.js
这个压缩包“bootstrap-5.3.2-dist.zip”包含了Bootstrap 5.3.2的分布式文件，这是该框架的一个更新版本，旨在提供更好的性能和兼容性。 Bootstrap 5.3.2主要包含以下几个核心组成部分： 1. **CSS**：Bootstrap的...
2. **预定义组件**：Bootstrap提供了丰富的预构建组件，如导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、按钮组（button group）、卡片（card）等，这些组件简化了网页的开发过程。 3. **CSS样式**：...
这个"bootstrap-3.3.7-dist.zip"压缩包包含了Bootstrap 3.3.7的完整分发版本，这是一个稳定且广泛使用的版本。在这个版本中，开发者可以找到所有必要的资源来开始创建美观且功能丰富的网页。 Bootstrap的核心特性...
"bootstrap-table-fixed-columns" 是这个库的一个扩展插件，旨在提供固定列的功能，使得在宽屏或窄屏设备上查看表格时，重要的列始终保持可见，增强用户体验。 在原版的 `bootstrap-table-fixed-columns` 插件中，...
Bootstrap的核心特性包括网格系统、表单、按钮、导航、模态框、警告提示等，同时支持自定义主题和扩展插件，大大提高了网页开发的效率。 Bootstrap3是该框架的一个重要版本，引入了更简洁的设计语言，优化了响应式...
Bootstrap 3的核心特性包括网格系统、排版、表单、按钮、导航及其他可重用组件，它们都遵循移动优先的设计理念，确保网站在不同设备上都能良好显示。 Bootstrap3-Layoutit作为一个在线编辑器，其主要功能包括： 1....
3. **组件**：Bootstrap 3包含多种可复用的组件，如导航条（navbar）、下拉菜单（dropdown）、模态框（modal）、轮播图（carousel）、按钮组（button group）和表单控件等，这些组件大大减少了自定义设计的工作量。...
Bootstrap-table.js 是一个基于Bootstrap框架的前端数据展示插件，它允许用户在网页上创建功能丰富的、可操作的表格。这个插件的核心理念是提供一个简单而强大的方式来展示动态数据，同时保持良好的用户体验和响应式...
Bootstrap3是目前广泛使用的前端框架，以其简洁、灵活的网格系统、丰富的预定义组件和易于定制的特点，深受开发者喜爱。而将Bootstrap3引入Axure，旨在提升原型设计的效率和专业性。 首先，我们来了解一下Axure RP...