bootstrap快速做网页(bootstrap网页设计)

web前端开发框架bootstrap怎么使用

方法/步骤

1

首先我们当然是需要得到Bootstrap相关文件，因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载。

2

如果你的英文水平不是太好的话，没关系，我们可以到国内做的汉化比较好的Bootstrap网站去下载，最新版本都是3，属于扁平化的那种。

3

以上两步点击下载按钮后都会跳转到一个详细下载列表，有三种Bootstrap，这里我们下载第一个就可以了。

4

下载完成后解压，会看到文件有三个子文件夹，分别是css、font、js，里面带min的文件都是压缩后的文件，在网站上线的时候用，其他未压缩的文件我们可以在平时开发的时候用。

5

再之后就是要用这套Bootstrap框架了，首先要做的就是建立一个html文件，你可以用任何文本编辑器，这里推荐DreamweaverCS6，个人感觉比较好用。

6

接下来就是要引入css文件了，要把文件的路径写正确，如果网页内用到了Bootstrap的js效果，那么必须先引入jQuery文件，因为Bootstrap的js插件都是基于jQuery的。

7

最后就可以在body标签内应用Bootstrap相关的class了，这些都是封装好的，只要嵌套正确就是做出漂亮的网页了。

根据优势选着你觉得合适自己的：

bootstrap：优势与劣势

bootstrap

2以后的版本不支持IE6。当你的网站需要支持ie6的时候，这时是缺点。当网站不需要支持ie6.减少了兼容代码的处理，马上又变成了优点。

总体而已，Bootstrap属于前端ui

库，通过现成的ui组件能够迅速搭建前端页面。同时还可以用less重新设计组件。对于前端技术一般的后台工程师，省去了很多编写前端处理时的痛苦。个人使用搭个博客什么的比较方便。

相对于公司，直接使用Bootstrap

感觉不多，大公司都有自己的前端开发设计人员，也会设计自己的css库。当然，Bootstrap开源，对于学习如何组织css还是很有必要。

个人认为：bootstrap最大的缺点在于---------大家做出来的网站都一个摸样。

html5：优势与劣势

1、摆脱对平台的依赖

HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store的审核。

2、实时更新

实时更新，通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办?Web方式就不存在这种问题。

3、离线使用

用户可以离线使用，更新下载量及少，可以全部更新，也可以选择替换部分文件。

4、代码更安全安全

使用HTML5，代码更安全安全。众所周知Web应用有一个很大的问题就是代码安全的问题，但现在HTML5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。

5、跨平台

HTML5可以做到跨平台，多数核心代码不用重写，Javascript的代码用得好的话，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。诚然，这种方式并非完全跨平台，但这样也足以减少很多工作量了，特别是后期的维护。

6、可以充分利用Native

HTML5可以通过浏览器作为中介充分利用Native的好处，比如说可以使用GPS、照相机、本地相册、读取本地联系人，也可以使用推送功能等，最重要的是，某些Web无法实现的功能，我们可以利用Native来实现。

HTML5可能对移动Web带来更多好处，原因是，现在的移动Web，iPhone占主导地位，而iPHone是不支持Flash

的。HTML5还会让其它平台的移动浏览器有更快的网页加载速度。另一个好处是SEO，Google

4月9号宣布，将页面加载速度作为搜索排名的一个因素，因此，基于HTML5的页面也会因加载速度更快而受益。

不过，和任何新技术的降临一样，其中也会牵扯到一些问题，对Web

设计者而言，最大的一个问题就是因为这些新标签的引入，各浏览器之间将缺少一种统一的数据描述格式。

在HTML5被广泛采用之前，我们还无法完全知道HTML5

代码将带来的好与坏，总体来说，对开发者而言，这将是一个巨大的变化，而对图形设计师而言，还不明朗。

可以用mediaquery媒体查询来设置不同分辨率下的不同css样式

/*超小屏幕（手机，小于768px）*/

/*没有任何媒体查询相关的代码，因为这在Bootstrap中是默认的（还记得Bootstrap是移动设备优先的吗？）*/

/*小屏幕（平板，大于等于768px）*/

@media(min-width:@screen-sm-min){...}

/*中等屏幕（桌面显示器，大于等于992px）*/

@media(min-width:@screen-md-min){...}

/*大屏幕（大桌面显示器，大于等于1200px）*/

@media(min-width:@screen-lg-min){...}

给你来一段样例，你看看

@media(min-width:?768px)?{

?.ipad

?{

????display:?none;

?}

?.mobile

?{

???display:?none;

?}

?.pc

?{

???display:?block;

?}

?.row?{

???margin-left:?0;

???margin-right:?0;

?}

?.home-bg?{

???//margin:?0;

???background:?url(asset-path("common/home_big3.jpg"))?center?no-repeat;

???width:?100%;

???height:?500px;

???background-size:?cover;

?}

}

@media?(max-width:?767px)?{

??.ipad

??{

????display:?block;

??}

??.mobile

??{

????display:?none;

??}

??.pc

??{

????display:?none;

??}

??.home-bg?{

????background:?url(asset_path("common/home_1024.jpg"));

????background-position:?center?center;

????background-repeat:?no-repeat;

????background-size:?cover;

????//height:?100%;

??}

?}

@media(max-width:?480px)?{

??.ipad

??{

????display:?none;

??}

??.pc

??{

????display:none;

??}

??.mobile

??{

????display:?block;

??}

??.home-bg?{

????background:?url(asset_path("common/home_640.jpg"));

????background-position:?center?center;

????background-repeat:?no-repeat;

????background-size:?cover;

????height:?600px;

??}

?}

想必你能理解我的意思

方法/步骤

何为Bootstrap?简洁的、直观的、超牛的、以移动设备优先的前端开发框架，让web开发更迅速、简单。他是Twitter推出的html/css的前端框架,现在的网页设计越来越多的平面化,所以,也就出现了一些平台来做平面化的样式来供我们来使用.因为这款框架是一个开源的框架,所以现在很多人都在使用该框架.下载下来的框架目录结构如图:

怎

么去使用一个开源的框架或者一段现成的源码?首先你确定要保证你所需要的引用你都有,还有你要保证运行的最小点.就是需要3个外部文件,A,

B,C,你就要找到这3个文件,如果是你找到的一段代码,你要确保他能够运行,如果都没有办法运行,放弃吧.另找下一个.一般情况下,

一个框架都会给你一个最基本的例子,这个例子中使用了框架需要的外部文件和一些简单的说明,bootstrap也给出了一个简单的例子.

如图就是最基本的一个例子.该例子说了一个很重要的,也是很好的一个文件引用的方式,就是css.全部放在上面,然后把js.

都放在页面的最下面,这样能够更好的加载页面渲染.建议你使用最基本的页面去修改你需要的页面,而且要做到按照自己的需求来写代码.不要复制,

粘贴.

Bootstrap中内置了一套响应式的,移动优先的流式栅格系统,随着不同的设备,不同的平台.或者窗口大小(viewport),根据他们的不同系统会自动的分成12份.也就是说,栅格系统是通过一系列的行和列来组成我们需要的页面,然后把你需要的内容放在这些的布局中.在使用栅格系统的时候,需要注意的是:需要在使用.row(行的意思)的外层使用.container为的是,在赋值时给出合适的排列(aligment)和内补(padding).

举

个例子:一行其中包含3个内容分别占屏幕的25%,50%,25%.我们要在超小屏幕设备-手机上使用.那么就要写成12的3,6,

3.具体代码看图片,这里的效果图,为了效果加上了一个well的class.只是为了演示效果,能够看清除.

为了有一个很好

的学习东西,让你看一下表格的创建.就是这么的简单,只需要在table上,

填写一个class为.table的样式即可生成一个很好很实用的表格.其实,这些都是别人提前建立好的页面显示效果,

就是不用自己再去写一些简单的css效果.多练.多使用它就属于你.

在给出一个只有简单的带有导航栏的页面.该页面,理解透了,这个东西你就算学会了,剩下的就是用什么查一下文档就拿来用了,