基于bootstrap的网页开发
时间： 16:30:59
&&&& 阅读：93
&&&& 评论：
&&&& 收藏：0
标签：1-1 课程介绍
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
1)&&&&& 漂亮的设计
2)&&&&& 友好的学习曲线
3)&&&&& 卓越的兼容性
4)&&&&& 12列的响应式栅格结构
5)&&&&& 丰富的组件
Bootstrap是一款简洁强大的前端开发框架，让web开发更迅速、简单。
特点：简洁、扁平化的图标、优雅的排版、
2-1 如何开始使用Bootstrap
Bootstrap分为Bootstrap2 和 bootstrap3
Bootstrap2 兼容很多浏览器、包括IE老版本，由于背着这样的包袱，功能不够激进，代码不够简洁。
自Bootstrap 2.3.2 版本之后，官方关闭了对此系列的更新。
Bootstrap3 则放弃了IE7和firefox 3.x 版本的支持。虽然对IE8支持，但是IE8对CSS3的支持有限，所以有些效果的呈现大大折扣。
我们这里主要研究Bootstrap 3.2.0 版本，官方页面很简洁，
如果不想下载可以直接引用Bootstrap官网的CDN(在线代码库)
下载的文件目录
(注意boostrap所有的样式和插件都依赖Jquery，所以必须先引入)
以上是boostrap官方提供的模板，bootstrap 不提供IE的兼容模式，
平时用的移动浏览器是把页面放在一个虚拟的视口，也就是viewport 中，虚拟视口比屏幕宽，不会造成页面的挤压，但是对破坏一些针对移动浏览优化的布局。用户可以通过缩放和平移看页面各部分信息。
Viewport可以让网页开发者控制网页的大小和缩放，
Width=device-width,这个就是viewport 的宽度等于设备的宽度。
Initial-scale=1 设置初始载入时的缩放比例，1表示不缩放。
上面的意思宽度等于设备的分辨率，不缩放，这样页面显示更加细腻。
这段注释解释：
第一个引入的js 让IE8支持html5，第二个引入是让IE8支持media query
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
"指定用户是否可以缩放视区，即缩放Web页面的视图。"是user-scalable指令 ,值为yes时允许用户进行缩放，值为no时不允许缩放。
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！5784人阅读
bootstrap（17）
如果你是一名工程师或者网页设计师，那么肯定对这个框架早有耳闻，甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目中理想的web应用。
而在去年年底推出的更是追随了、的web开发与设计潮流，让我们感受到了它所带来的无穷魅力。
我们会通过接下来一系列的Bootstrap教程，让Bootstrap初学者们一步步掌握Bootstrap的使用方式，在本次教程中，我们将会讲解，如何在你的项目中引入Bootstrap方法，当然，为了与国际接轨，我们还是以Bootstrap3为例，一步步展开。
官网下载压缩包
完整压缩包可以到下载，或者直接到我们的文章结尾处下载，下载解压缩以后我们会获得如下的文件目录：
bootstrap/
├── css/
│&& ├── bootstrap.css
│&& ├── bootstrap.min.css
│&& ├── bootstrap-theme.css
│&& └── bootstrap-theme.min.css
├── js/
│&& ├── bootstrap.js
│&& └── bootstrap.min.js
└── fonts/
&&& ├── glyphicons-halflings-regular.eot
&&& ├── glyphicons-halflings-regular.svg
&&& ├── glyphicons-halflings-regular.ttf
&&& └── glyphicons-halflings-regular.woff
从这个目录结构我们可以看到css、js文件以及fonts文件都已经包含进来了，将这个文件目录放入你的项目ui文件夹下。
在HTML文件中引入
为了符合搜索引擎优化规则，我们引入最核心的压缩文件即可，其中包括bootstrap.min.css、bootstrap-theme.min.css以及bootstrap.min.js。
bootstrap.min.css文件中涵盖了所有Bootstrap的核心样式，包括按钮、导航栏、布局等等元素。
bootstrap-theme.min.css文件包含所有Bootstrap2的样式，如果你想在Bootstrap3的框架中使用Bootstra2的样式，那么就可以将该文件在bootstrap.min.css之后引入，从而覆盖前者的扁平化样式。
bootstrap.min.js文件中包含了所有Bootstrap3中的js交互以及逻辑代码，必须引入。
所以我们可以在项目的公用头文件模块调用如下代码：&!-- 引入已经压缩的css文件 --&&linkrel=&stylesheet&href=“/ui/css/bootstrap.min.css&&&!--
如果你想采用Bootstrap2的样式，那么引入该压缩css文件 --&&linkrel=&stylesheet&href=“/ui/css/bootstrap-theme.min.css&&&!--
引入已经压缩的js文件 --&&script src=“/ui/js/bootstrap.min.js&&&/script&在这之后就可以在你的项目中调用对应的Bootstrap样式以及JS模块了。
注意点补充
值得注意的是，如果你先前使用过Bootstrap2，就会发现Bootstrap3的压缩包里缺少了bootstrap-responsive.css文件以及增加了bootstrap-theme.min.cs文件。
后者的作用我们在之前已经解释了，前者是在Bootstrap2中起到一个实现响应式技术的作用，而在Bootstrap3中，将其整合到了Bootstrap.min.css文件中，减小文件数量与其大小，这正是非常重要的一点。
这篇引入Bootstrap方法入门教程先写到这，之后我们会陆续推出一系列Bootstrap教程文章，有兴趣的朋友可以持续关注我们。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：41335次
排名：千里之外
转载：25篇
(1)(6)(20)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'如何简单快速的修改Bootstrap
稿源：中文互联
并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。
可悲的是，它纯粹的功能唤起了我们本能的懒惰，很多人始终坚持使用它的默认设置。现在，你要知道，这些经过丰富想象力的默认样式和布局网格都不差，他们都是Twitter team花费了大量时间和精力的产物。他们是坚实的基础。
但是，Bootstrap的真谛是&基石&。Bootstrap框架，并不意味着它是全部终结解决方案。这个规则的一个例外可能是，如果你在内部开发了些东西，是公众看不到的。但是即使这样，你的想法会将人们带的更远，甚至改变一切。
Bootstrap的开发者们确实做了非常棒的工作，使得很多事情变得简单，他们的代码被模块化，你可以下载框架的独立组件。他们在网站上甚至提供了一款基本自定义工具，允许你编辑变量。
其余的，则决定于我们。一些真正的设计者和开发者已经加紧创建工具和变更，我们没有理由落于人后。现在已经没有借口再去使用Bootstrap的默认设定了。
Bootstrap 变更
以下是一系列变更已经非常成熟了，可以将你基本的bootstrap变得不再是你熟识的那个样子。这些变更的使用可能有些限制，也有些是在特定条件下使用的，但是如果他们符合你的需求，他们会为你省下不少时间和金钱。
第一种变更就是Flat UI（扁平化设计界面），由发布。Flat UI迅速普及开来，在设计界有很好的理由：那就是它做的很漂亮。它是为那些偏爱扁平化设计的人存在的 - 与Bootstrap多少有些的拟物化设计正相反 - 每一个UI元素都被依据崭新的美学重新设计了。
矢 量图标，一个新的字形图标字体，自定义的UI元素（类似于to-do list）和多种改变起来非常容易的颜色主题，Flat UI让我，可能许多人也一样，重新设想Bootstrap可以如何展现。我经常觉得，基本的段落元素中的文本大小对于网站而言有些小，说句公道话，我觉得 他们只适合于应用程序的界面，在应用程序的界面里，你可以将文本放在狭小的空间里。
Flat UI是免费的，但是你可以使用付费的专业版本，专业版本中有附加元素，功能和PSD文件。
Fbootstrapp
记得我之前说过有些变更是有特定使用条件的？我当然不是玩笑的。已经完全重新开发用于兼容Facebook的用户界面元素。
为 什么要这么做呢？用他们自己的话说就是&Fbootstrapp是一套发起了Facebook iFrame应用开发的工具包。它包括了基本的排版，表格，按钮，表单，网格，导航和更多元素的CSS和HTML样式，让他们看起来和体验起来都和典型的 Facebook一样&。
Facebook的开发者们，注意，你们的工作开始变得简单了。
Jumpstart UI 管理模板
Bootstrap主要是用于应用，如果你想要将它在经典的&管理员界面&上应用，你还需要额外的工作。Jumpstart UI为你带来三种不同的模板，让你不再费力。
管理员UI图标，小部件的样式，基于jQuery的数据可视化插件还有更多其他的，被引入了干净的，可自定制的，全响应布局中。
这种变更不同于其他的最大一点是，它没有任何免费的版本，而必须付费才能使用。它只需要15到20美元，与它可以实现的功能，以及它符合你的特殊需求这两点而言，这个价格非常的划算。
有些人喜欢它，但更多人厌恶它，但是不可否认的是Windows 8和其Metro UI在设计界引起了轰动。我并不认为这种UI有特别的用处（一些软件商店除外），不过我们有一个！
它是免费的，而且看起来特性完善，所以放心使用吧。对于大多数人而言，他可能不是特别有用，但是他是一种新奇的代码体验。
Bootstrap客制化工具
所以你想引导你的Bootstrap更好的达到你的UI需求，你要如何开始？你当然可以直接看代码，我可以告诉你，这样做是非常困难的。
如 果你想手动改变所有的排版，或者是按钮，链接颜色，又或者是导航样式，你可以在Bootstrap网站上的客制化应用中编辑所有的变量，但是你必须知道所 有颜色的HEX代码，而且当你做改变的时候，你看不到任何的可视性返回，也就是说你在修改的时候，完全不可预见你编辑后的样子是什么样的。
但是幸运的是，现在有很少一部分Bootstrap主题创作者为了这种客制化需求，特别做出了一些工具。以下是我至今认为最好的两种。
StyleBootstrap
如果你忽略笨拙的界面，StyleBootStrap是款很强大的工具，用于编辑你可以在框架总见到的大多数默认UI元素。
Bootstrap Magic
Bootstrap Magic是一款帮助你重塑架构的工具。它的界面简单友好，比StyleBootstrap可以微调更多的元素。因此，它需要更多的时间，但是它比起手动修改所有元素还是节省了不少时间。
插件& & 片段
有些东西是Bootstrap没有的，但是对我们而言却是非常重要的。首先是图标。
Font Awesome
Bootstrap 提供的图像字符图标非常酷，但是却很有限。你有一个&黑暗&图标，还会有一个&光亮&图标，这些都是一个可爱的小精灵图像。但是图标字体，应该更为灵活。 任何你可以用CSS3做的编辑，在这些图标上也都应该可以实现。比如改变颜色，给他们加上一个阴影，像写CSS一样简单。Font Awesome可以现在可以为361个图标进行这样的修改。
Bootsnipp是一个HTML片段库，与Bootstrap结合使用，并且不需要添加其他库。片段包括：注册和登陆表单，日历，类似Gmail的e-mail界面，media player界面，甚至更多。
这并不是全部
Twitter宠爱的模板越来越被广泛适应，也许在自定义Bootstrap上有更多的方法，更多的信息，是我的列表乃至任何列表中都没有的。毕竟，互联网就是为此而存在的，对吧？
来源：/technology/javascript/-modify-bootstrap-quickly/
文章：359篇人气：58221
< 是专注于互联网技术的独立博客，我们分享最好的html，css，javascrip，jQuery等技术教程和文章，及其UI设计和素材，努力成为最专业的产品，UI设计和编程开发网站内容分享和原创网站。
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页20个使用Bootstrap前端框架制作的漂亮网站 | 设计达人
爱设计，爱分享。
20个使用Bootstrap前端框架制作的漂亮网站
赞助商链接
Bootstrap是一个流行的前端框架，他可以让开发者快速搭建一个时尚的网站，并且兼容响应式，可以在桌面或移动平台上浏览网页都有良好的表现。
今天我们为大家整理一系列使用Bootstrap来搭建的网站，值得一提，这些网站虽然是使用了框架，但还是需要自己DIY一些样式才能这么漂亮的，好吧，下面一起看看是他们的创意设计，从中获取一些设计灵感吧！
BTW，如果你也想制作这些兼容手机或微信访问的企业网站、博客，可以尝试使用一些已设计好的模板：《》、《》、《》
tsaateashop
johanholmberg
paulvanoijen
drurybuildings
stupid-studio
stockflare
kitchenprague
theconference
streamlineicons
Imagina nas Ferias
Resto elephant
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群}