[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.我们首先需要快速掌握格栅系统
<div class = "row">
<div class = "col-sm-4"></div>
<div class = "col-sm-8"></div>
<div>
我们可以简单理解为:
我们在 一行之中把画面分割为4:8的长度的盒子
事实上,这样的盒子还可以嵌套
<div class = "row">
<div class = "col-sm-4">
<div class="row">
<div class = "col-sm-4"></div>
<div class = "col-sm-8"></div>
</div>
</div>
<div class = "col-sm-8"></div>
<div>
这样一来我们在左侧原有的分割基础之上将左侧再分出了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.下载链接
相关文章
- [Web 安全] WASC 和 OWASP两个web安全方面组织机构介绍
- 云集,让 web app 像 native app 那样运行(雄起吧,Web 开发者)
- 【CTF WEB】ISCC 2016 web 2题记录
- C/C++ 静态链接库(.a) 与 动态链接库(.so)
- spring mvc:拦截器不拦截静态资源的三种处理方式
- C++静态库与动态库
- 转 php简单伪静态实例
- 移动WEB应用开发框架moible-web-app开源
- [Web component] Using Custom Events as a web component API
- 一个伪静态与404重定向例子(房产网),.htaccess文件内容
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- paddlepaddle 20 指数移动平均(ExponentialMovingAverage,EMA)的实现与使用(支持静态图与动态图)
- Python Django 配置静态资源访问(settings配置)
- 静态变量和实例变量的区别
- ASP.NET Core应用针对静态文件请求的处理[1]: 以Web的形式发布静态文件
- Atitit 2016 技术趋势与没落技术 目录 1.1. 离线优先Web应用程序(Offline first web applications)1 1.2. 依照产品而不是项目(product
- Atitit.web三大编程模型 Web Page Web Forms 和 MVC
- Atitit.web三大编程模型 Web Page Web Forms 和 MVC
- 搭建Dynamic Web Project(动态web项目)的springmvc工程2
- 【Android 逆向】Android 逆向通用工具开发 ( Windows 平台静态库程序类型 | 编译逆向工具依赖的 Windows 平台静态库程序 )
- C/C++,在类中存在static静态变量,static变量初始化方法
- Web测试中,各类web控件测试点总结
- 【Web测试】各类web控件测试点汇总,软测人必备
- ListView优化中ViewHolder要不要定义为static静态内部类?
- Web 开发框架 — Express 精讲(安装使用、静态托管、路由处理、中间件的使用)
- 华为云服务器静态BGP和全动态BGP带宽有什么区别?
- 静态函数和全局函数
- 【Web开发】Nginx部署静态网页全流程
- 代码静态测试王者新版上线——Helix QAC 2021.3:我的格局打开了