bootstrap制作的网站页面(利用Bootstrap框架制作Bootstrap中文网首页)
大家好，今天小编来为大家解答bootstrap制作的网站页面这个问题，利用Bootstrap框架制作Bootstrap中文网首页很多人还不知道，现在让我们一起来看看吧！
写网页用原生 html5 和 bootstrap 哪种用户体验好
根据优势选着你觉得合适自己的：
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
代码将带来的好与坏，总体来说，对开发者而言，这将是一个巨大的变化，而对图形设计师而言，还不明朗。
bootstrap框架怎么在html页面加载使用
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。
如果需要使用该框架只需要引入bootstrap的必要文件bootstrap.css和bootstrap.js文件
以下是一个简单的bootstrap示例：
<!DOCTYPEhtml>
<html>
<head>
<title>Bootstrap模板</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--引入Bootstrap-->
<linkrel="external nofollow" href=""rel="stylesheet">
<!--HTML5Shim和Respond.js用于让IE8支持HTML5元素和媒体查询-->
<!--注意：如果通过file://引入Respond.js文件，则该文件无法起效果-->
<!--[ifltIE9]>
<scriptsrc=""></script>
<scriptsrc=""></script>
<![endif]-->
</head>
<body>
<h1>Hello,world!</h1>
<!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)-->
<scriptsrc=""></script>
<!--包括所有已编译的插件-->
<scriptsrc="js/bootstrap.min.js"></script>
</body>
参考资料（bootstrap中文网）：
bootstrapt按钮的风格有哪些
摘要：bootstrapt按钮的风格主要有：基础按钮、默认按钮、主要按钮、成功按钮、信息按钮、警告按钮、危险按钮、链接按钮。
一、按钮简介：
按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。
而且不同的Web页面具有不同的按钮风格，甚至说同一个Web网站或应用程序具有多种按钮风格，比如说不同的按钮颜色、大小和状态等。
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
二、基本按钮
Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。
不同的是在V3.x版本要简约很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。
Bootstrap框架中的考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。
源码请查阅bootstrap.css文件第1992行～第2010行：
Bootstrap框架的按钮使用非常的简单，使用方式如下：
<button class="btn" type="button">我是一个基本按钮</button>
三、默认按钮
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。
默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
源码请查阅bootstrap.css文件第2040行～第2044行
使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可：
<button class="btn btn-default" type="button">默认按钮</button>
四、多标签支持（多种标签制作按钮）
一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。
同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。
如果不添加是不会有任何按钮效果。
<button class="btn btn-default" type="button">button标签按钮</button><input type="submit" class="btn btn-default" value="input标签按钮"/><a rel="external nofollow" href="##" class="btn btn-default">a标签按钮</a><span class="btn btn-default">span标签按钮</span><p class="btn btn-default">p标签按钮</p>
虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。
五、定制不同风格的按钮
在介绍按钮开篇就说过，Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。
在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。
在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可：
使用起来就很简单，就像前面介绍的默认按钮一样的使用方法，只需要在基础按钮“.btn”基础上追加对应的类名，就可以得到需要的按钮风格。如：
<button class="btn" type="button">基础按钮.btn</button><button class="btn btn-default" type="button">默认按钮.btn-default</button><button class="btn btn-primary" type="button">主要按钮.btn-primary</button><button class="btn btn-success" type="button">成功按钮.btn-success</button><button class="btn btn-info" type="button">信息按钮.btn-info</button><button class="btn btn-warning" type="button">警告按钮.btn-warning</button><button class="btn btn-danger" type="button">危险按钮.btn-danger</button><button class="btn btn-link" type="button">链接按钮.btn-link</button>六、按钮大小
在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
在Bootstrap框架中提供了三个类名来控制按钮大小：
从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。
源码查阅bootstrap.css文件中第2319行～第2339行
那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名：
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
七、块状按钮
Bootstrap框架中提供了一个类名“btn-block”。
按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。
具体源码请查阅bootstrap.css文件第2340行～第2353行：
使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：
<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button><button class="btnbtn-primary btn-block" type="button">正常按钮</button><button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button><button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
八、按钮状态——活动状态
Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。
Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。
源码请查看bootstrap.css文件第2011行～第2029行
不同风格下的按钮都具有这几种状态效果，只是颜色做了一定的调整，我们以默认风格（btn-default）为例：
源码请查看bootstrap.css文件第2045行～第2058行
当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于<button>元素是通过“:active”伪类实现，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>九、按钮状态——禁用状态
和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。
禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
两者的主要区别是：
“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。
如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。
对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。
而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button><button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button><button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>
关于bootstrap制作的网站页面到此分享完毕，希望能帮助到您。