[Web]如何利用Boostrap框架搭建一个还可以的静态网站

0.首言

0.1.完善后的效果

代码小白依赖Boostrap制作的简易静态网站

0.2.环境

‘1.开发工具 ：HBulider X
2.框架版本： Boostrap 3

1.关于Boostrap

1.1.Boostrap是什么？

定义

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob
Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web
开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
News都使用了该项目。 [1]
国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 [2]

包含内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的
class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。 组件：Bootstrap
包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。 JavaScript
插件：Bootstrap包含了十几个自定义的jQuery
插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。 [5]

1.2.我们为什么使用Bootraps?

1.因为他有非常多的即拿即用的样式
2.因为它具备格栅系统和响应式特征，会帮助提升我们的网页开发速度
3.因为它的入门门槛很低，有ht cs js的基础即可使用
4.因为它很流行，有很多文档

1.3.我们需要准备什么？

我们可以从Boostrap中文网下载我们需要的文件

并在编写代码时，在html页面中首先引用Boostrap.min.css,Boostrap.min.js,Jquery,js
其中我们要注意的是，在引用时除了首先引用之外，你需要比boostrsap.min.js更早引用Jquey.js

1.4.我们如何快速掌握Boostrap的技巧？

1.我们首先需要快速掌握格栅系统

"row">
	
"col-sm-4">
	
"col-sm-8">

我们可以简单理解为：
我们在 一行之中把画面分割为4：8的长度的盒子

事实上，这样的盒子还可以嵌套

"row">
	
"col-sm-4">
		
"row">
			
"col-sm-4">
			
"col-sm-8">
		
	
	
"col-sm-8">

这样一来我们在左侧原有的分割基础之上将左侧再分出了4:8的盒子

2.除了Boostrap，我们还有什么？

事实上Boostrap帮助的过程当中也极大的限制了我整个的思考过程。
在处理的过程当中我仍然需要手写很多的样式，因为Boostrap不能时时满足我们的要求

除了手写样式和简单的交互之外，我还使用了一些简单的 animate 动画来增加一点效果，并且引用了一个动画插件给那个看起来不错的首页

3.各个页面的详细制作过程链接

4.手写的通用JS和CSS

4.1.css CommonStyle.css

.font_date{
	font-size: 250%!important;
	font-family: 黑体;
	color: black;
}

.space_div_col12_height50px{
	height: 50px;
}
.div_auto_center{
	margin: 0 auto;
}

.font_head_NO1{
	font-size: 500%!important;
	color: red;
	font-family: "黑体";
}

.backgorund_NULLColor{
	backdround:none !important;
}
.style_autoIMG_justWidth{
	width: 100%;
	height: auto;
}
.div_center_byHeight_50percent{
	margin-top: 50%;
}
.div_center_byHeight_25percent{
	margin-top: 25%;
}
.font_size_150{
	font-size: 150%;
}
.userName_color{
	color: #FB7299;
}
.btn_size_25percent{
	width: 25%;
}
.img_150px{
	height: 100px;
	width: 100px;
}

4.2.css indexCss1.css

*{
	padding:0px;margin:0px;
}
html,body{
	width: 100%;height: 100%;
	background: #f6f9fa;
}

hr{
	border: none;
	background-color:#444444;
	height: 2px;
}

img{
	
}

#_mian_style{
	width: 80%;
	margin-top: 5%;
	margin-bottom: 5%;
}
#_mian_screenCore{
	height: 1200px;
	width: 80%;
	border-radius: 5px;
	border: 2px solid;
	margin: 0 auto;
	margin-top: 5%;
	margin-bottom: 5%;
	text-decoration: none; 
}
#_header_MainScreen{
	max-height: 200px;
	background-image: url(../img/Main_bg_PC_0607PM.png);
	padding: 0px;
	margin: 0px;
	text-decoration: none; 
}
#_banner_jumbotron{
	max-height: 200px;
	background-image:url(../img/Main_bg_PC_0607PM.png)
}
#footer_Info{
	padding: 0px;
	margin: 0px;
}

.color_MianColor{
	background-color: #ffdeeb;
}

.color_footer{
	background-color: #222222;
}

.AUTO_center{
	margin: 0 auto;
}

.font_head{
	color: red;
	font-family: "黑体";
}
.font_txt{
	font-size: 30px;
	color: #111111;
}
._main_new_img{
	height: 200px;
	width:300px;
	box-shadow: 5px 5px 5px;
	border-radius: 10px;
}
#_Main_title_logo{
	padding-left: 5%;
}

#banner_word_img{
	min-height: 700px;	
	
	background-image:url(../img/banner_imgs/banner_word_bg_600X900.jpg)
}

.style_autoIMG{
	width: 100%;
	height: 100%;
}

.banner_secoend_hr_Header-font-style{
	font-size: 250%;
	font-family: "黑体";
	color:black;
}
.banner_secoend_hr_Txt-font-style{
	font-size: 90%;
	font-family: "黑体";
}

.up10px{
	margin-top:-10px;
}

.font_zhenjing{
	font-size: 320%;
	font-family: "黑体";
	color: red;
}
.space_lr_50px{
	width: 50px;
	height: 50px;
}
.space_ud_style_5{
	margin-top: 5%;
	margin-bottom: 5%;
}
.space_ud_style_1{
	margin-top: 1%;
	margin-bottom: 1%;
}
#_main_news_1_img{
	background-image: url(../img/_mian_new_1_570x357.png);
	min-height: 250px;
	height: 100%;
}
#_main_news_2_img{
	background-image: url(../img/_mian_new_2_570x338.png);
	min-height: 250px;
	height: 100%;
}
#_main_news_3_img{
	background-image: url(../img/_mian_new_3_570x300.png);
	min-height: 250px;
	height: 100%;
}
._main_news_blockStyle{
	border-radius: 5px;
	border: 2px solid #000000;
	margin-bottom: 50px;
	min-height: 260px;
	box-shadow: 10px 10px 5px #888888;
}
#advertising_img{
	background-image: url(../img/adversting/adversting_1_1700X144.png);
	min-height: 144px;
	min-width: 500px;	
}

#advertising_lastBanner_img{
	background-image: url(../img/adversting/adversting_changpai_1750X745.png);
	min-height: 750px;
	min-width: 500px;	
}
.border_right_solid-2-black{
	border-right: solid 2px #000000;
}
.font_style_150-withe-txt{
	font-size: 150%;
	color: white;
}

.bg-pan-right {
	-webkit-animation: bg-pan-right 8s both;
	        animation: bg-pan-right 8s both;
}

4.3.js CommonStyle.js

function getDate()
	{
	var time = new Date();
	var year = time.getFullYear();
	var month = time.getMonth()+1;
	var day = time.getDate();
	var time_H = time.getHours();			
	var time_M = time.getMinutes();
	var time_S = time.getSeconds();
	var time_flag;
	var time_xq = time.getDay();
	if(time_xq==1) time_xq='一';
	if(time_xq==2) time_xq='二';
	if(time_xq==3) time_xq='三';
	if(time_xq==4) time_xq='四';
	if(time_xq==5) time_xq='五';
    if(time_xq==6) time_xq='六';
	if(time_xq==7) time_xq='七';
				
	if(time_H<=12) time_flag="am";else time_flag="pm";
			
	var str = year+"年"+month+"月"+day+"日"+"星期"+time_xq+time_H+":"+time_M+":"+time_S+time_flag;
	
	$("#timeOrder").html(str);
}
			
setInterval(getDate,"0");			

$(window).bind("load", function ()
{

				
			setInterval(getDate,"1000");
})

5.各个子页链接

启动页
主页
戒烟小说
脱发指南
电子烟
注册页

6.下载链接

依赖Boostrap的戒烟主题静态网站0C币下载