你想使用bootstrap，首先你需要有各种不同的库。按照下面的步骤来设置和准备开始教程。
首先你要到bootsrap官网下载推特引导通过此链接和jQuery库
一旦你有了这些下载文件创建一个称为易于访问的文件夹bootstrap3tutorial。
在这个文件夹中创建子文件夹称为includes在includes子文件夹，你将需要两个称为bootstrap和jQuery。
提取引导下载内的内容bootstrap在文件夹和最新的jQuery库的JavaScript文件jQuery文件夹
然后在includes文件夹中创建一个空白的CSS文件styles.css。
最后在根bootstrap3tutorial文件夹中创建一个空白的HTML文件
启动响应HTML文件
你可以对你的反应之前，你需要设置引导模板的HTML文档所需的文件，包括与适当的标签，开始发展。添加下面的HTML代码到index.html文件中，这将创建一个空白的HTML网页所需的Bootstrap CSS文件和jQuery JavaScript插件引导。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/style.css" rel="stylesheet">
</head>
<body>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="includes/jquery/jquery-2.1.0.min.js"></script>
<script src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
JavaScript文件包含在页面的底部而不是传统上包括在<head>。这是保存页面加载时间。浏览器加载内容程序从顶部因此最好是在网页端荷载大的JavaScript文件后的内容和CSS已经加载的网站浏览者提供更好的体验。
在<head>的HTML文件是用以下两种元数据标签：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
一是正确设置字符编码以防止文本显示的问题，二是对移动设备如何显示网页。大多数移动设备会显示一个网站的智能变化尺度适合在手机屏。这个meta标签告诉移动浏览器显示的网页，可以让我们的开发者，准确地控制页面如何被显示：阅读更多关于视口here。
Bootstrap header 和响应式导航栏
Twitter bootstrap 提供了一套CSS类，可用来方便地创建导航菜单和导航栏。此外，它还提供了额外的功能，使导航菜单响应在移动视图切换的能力。一如既往的Twitter bootstrap 3文档是优良的，阅读更多关于Twitter bootstrap他们通过这一网站导航链接。
这bootstrap教程向你展示了如何创建一个响应式导航栏作为该反应模板的一部分。添加下面的HTML代码的<body>标签index.html。
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="#" class="navbar-brand pull-left">
BS3 TUTORIAL
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
标题和导航标签是新的HTML5标签，提供额外的定义你HTML代码，建议使用这些标签可能在哪里。
按钮元素navbar-toggle类是按钮，将显示在网站上的移动设备或通过一个小的浏览器窗口中查看。此按钮将允许用户切换菜单的打开和关闭，节省空间。提供此功能的数据属性如下：
data-toggle="collapse" data-target=".navbar-collapse"
添加到允许Bootstrap的JavaScript来隐藏或显示目标元素。
container类，封装了所有标题内容的划分元素重新大小的使用媒体查询基于视口的大小。这将保持在两边都有适当的利润中心的屏幕上的标题内容。容器元素的宽度将设置为1200px，992px或768px取决于设备或浏览器的大小。
添加横幅到你的bootstrap模板
使用container一次我们可以轻松的在模板中添加章节banner。添加下面的HTML代码的<body>标题添加你刚才在HTML标签。
<!-- Site banner -->
<div class="banner">
<div class="container">
<h1>Twitter Bootstrap 3: Responsive Design Tutorial</h1>
<p>A comprehensive tutorial showing you how to quickly create responsive designs using Twitter Bootstrap 3.</p>
</div>
</div>
使用Bootstrap的网格系统中创建内容区域
推特引导使用12列的网格系统，允许开发人员轻松地创建一个广泛的响应电网和柱的设计。要了解更多关于如何使用推特白手起家的网格系统，访问他们的文件在这里。
这Twitter bootstrap教程将向您展示如何使用Bootstrap网格系统创造流行的右栏的布局。你刚才添加的banner代码后添加下面的HTML代码。
<!-- Middle content section -->
<div class="middle">
<div class="container">
<div class="col-md-9 content">
<h2>Use Twitter Bootstrap to create responsive designs for desktop, tablet & mobile</h2>
<p>Twitter bootstrap allows web developers and designers to quickly create attractive and responsive website templates. This tutorial provided by <a href="http://www.revillweb.com/">RevillWeb.com</a> will show you how to use Twitter Bootstrap 3 to create this responsive website template.</p>
<div class="to-tutorial">
<p><strong>Visit the tutorial now to learn more:</strong></p>
<a href="http://www.revillweb.com/tutorials/bootstrap-tutorial/" class="btn btn-success">TO THE TUTORIAL</a>
</div>
</div>
<div class="col-md-3">
<h2>Resources</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="http://getbootstrap.com/" target="_blank">Download Twitter Bootstrap</a></li>
<li><a href="https://www.bootstrapresponsivethemes.com/" target="_blank">Bootstrap Responsive Themes</a></li>
<li><a href="http://amzn.to/1iO8NBg" target="_blank">UK: HTML & CSS: Design and Build Web Sites</a></li>
<li><a href="http://amzn.to/1lESKDp" target="_blank">UK: Bootstrap Site Blueprints</a></li>
<li><a href="http://amzn.to/1oXAbu6" target="_blank">US: HTML & CSS: Design and Build Web Sites</a></li>
<li><a href="http://amzn.to/1lESF2w" target="_blank">US: Bootstrap Site Blueprints</a></li>
</ul>
</div>
</div>
</div>
一次又一次的container类用于从模板的其他部分内容保持内容的内联。创建左、右段的主要内容区域col-md-9和col-md-3应用类。9和3的列数使用的每个部分（12）。引导程序将使用这个应用正确的宽度，每个根据屏幕的尺寸也被视为对部分边距与填充。
MD是中等大小的屏幕，点击这一链接了解更多XS（额外），sm（小）和lg（大）网格可用的选项，以及如何使用它们。
本代码是利用引导的导航类资产nav nav-pills nav-stacked创建一个堆叠的导航菜单在右面板中的名单里Bootstrap资源提供。
当这个网站是在移动浏览器的右列将被推的左栏下，所有的内容是在屏幕上可见的观察。
创建Bootstrap响应的页脚
利用网格系统，我们可以很容易地创建一三段页脚模板。将下面的代码添加到index.html。
<!-- Site footer -->
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
本代码是本质上是相同的为主要内容的区域代码除了三分元素用col-md-4类使用四列出来的12个。这些列是包裹在一个container分元让他们所有的内联。
与主要内容部分，每个列将栈下对方的时候，没有空间来显示他们的在线，如在移动设备上。
添加自己的样式
尽管Twitter Bootstrap可以用来创建令人惊叹的设计只提供的CSS类，添加你自己的CSS申请额外的风格建议。
添加下面的CSSstyle.css你以前创建的文件添加一个revillweb的主题，您的新创建的模板–然后你能适应这种创建自己的设计。
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
h1, h2, h3, h4 {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
p {
font-family: 'Lato', sans-serif;
}
html {
background-color: #474747;
}
.top {
background-color: #474747;
}
.top .navbar-brand {
height: 50px;
line-height: 50px;
text-align: center;
padding: 0 10px;
background-color: #CCC;
color: #474747;
text-decoration: none;
}
.top .container {
padding: 0;
}
.banner {
background-color: #373737;
}
.banner .container {
background-color: #009b9b;
min-height: 200px;
padding: 40px 30px 30px 40px;
}
.banner .container p {
font-size: 22px;
padding-left: 5px;
font-weight: 300;
}
.middle {
background-color: #CCC;
}
.middle .container {
background-color: #FFF;
min-height: 300px;
padding-bottom: 20px;
}
.navbar-nav li a {
color: #CCC;
font-family: 'Lato', sans-serif;
}
.navbar-nav li a:hover {
background-color: #373737;
}
.bottom {
background-color: #474747;
}
.bottom .container {
background-color: #373737;
min-height: 150px;
}
.bottom .container h3 {
color: #999;
}
.bottom .container p {
color: #666;
}
.navbar-toggle {
color: #009b9b;
font-size: 32px;
margin: 3px;
padding: 2px 5px;
line-height: 32px;
}
.navbar-toggle:hover {
background-color: #373737;
}
.navbar-nav {
margin: 0;
}
.content p {
line-height: 30px;
font-size: 16px;
}
.to-tutorial {
text-align: center;
}
简单点说：是一个快速搭建网站前台页面的开源项目（基于Jquery）。你只需要了解相关的class、标签名称等所代表的意思，然后在构建页面的时候，导入bootstrap的JS、css等，它就会去表现相应的效果出来：
比如HTML说明：缩略语；当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML 元素的增强样式。 缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。当你需要段落文字某个单词或者词语需要有上面的那种效果，你就那样按照那种格式写就好了，附加的class=“initialism”是让字号更小一点，也可以不要。反过来说：如果你不试用bootstrap的东西或者其他类似的框架，那你就得自己写这样的效果，开发时间长。再比如Jquery的easyui，也是差不多道理。
|
收藏
淘帖
踩
