前端框架利器——bootstrap.pdf

网名：大漠，W3cplus创始人，现居上海，从事 Web前端和手游工作，对HTML5、CSS3、移动端、前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群：
1041263 新浪微薄: http://weibo.com/w3cplus E-mail: [email protected]

前端框架利器 ——BootStrap 作者: 大漠 QQ: 81059347 Blog: http://www.w3cplus.com 新浪微薄：http://weibo.com/w3cplus

BootStrap是什么？简洁直观功能强大快速简单前端框架

BootStrap的历史早前是Twitter内部框架 2011年8月开源 2012年2月份发布2.0版本 2012年8月发布2.2.1版本

你关注过BootStap？ 39921人在关注 9814个分支

Bootstrap有些什么？基本框架基本样式功能组合 js库

我们开始吧！

BootStrap文件结构 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css
│ ├── ─bootstrap-responsive.css │ ├── ─bootstrap-responsive.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png

BootStrap安装 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

BootStrap基本框架全局设置网格系统布局响应式设计 http://twitter.github.com/bootstrap/scaffolding.html

BootStrap基本框架全局设置 <!DOCTYPE html> <html lang="en"> ... </html>

Bootstrap 网格系统固定网格 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
流体网格 <div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>

Bootstrap 布局固定布局 <body> <div class="container"> ... </div> </body> <div
class="container-fluid"> <div class="row-fluid"> <div class="span2">  </div> <div class="span10">  </div> </div> </div> 流体布局

BootStrap 响应式布局 http://www.w3cplus.com/search/node/responsive <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
/* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }

Bootstrap 基本样式标题、段落排版本代码表格表单按钮产品列表 Icons http://twitter.github.com/bootstrap/base-css.html

Boostrap 交互功能 http://twitter.github.com/bootstrap/components.html

BootStrap js http://twitter.github.com/bootstrap/javascript.html

Boostrap 动态编译 https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/twitter/bootstrap/tree/master/less LESS AND SASS

BootStrap 自定义选择组件选择js插件定义变量下载源码

能兼容可怕的IE？ https://github.com/airen/Bootstrap-IE6 http://jslegers.github.com/jquery-bootstrap/

你想学？ http://www.w3cplus.com/source/the- best-bootStrap-resources.html 8个代码生成器 9个工具 4个优秀主题 11个js库 11篇优秀教程

Q && A？

网名：大漠，W3cplus创始人，现居上海，从事 Web前端和手游工作，对HTML5、CSS3、移动端、前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群：
1041263 新浪微薄: http://weibo.com/w3cplus E-mail: [email protected]

前端框架利器——bootstrap.pdf

前端框架利器——bootstrap.pdf

w3cplus

More Decks by w3cplus

Featured

Transcript

网名：大漠，W3cplus创始人，现居上海，从事 Web前端和手游工作，对HTML5、CSS3、移动端、前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群：

前端框架利器 ——BootStrap 作者: 大漠 QQ: 81059347 Blog: http://www.w3cplus.com 新浪微薄：http://weibo.com/w3cplus

BootStrap是什么？简洁直观功能强大快速简单前端框架

BootStrap的历史早前是Twitter内部框架 2011年8月开源 2012年2月份发布2.0版本 2012年8月发布2.2.1版本

你关注过BootStap？ 39921人在关注 9814个分支

Bootstrap有些什么？基本框架基本样式功能组合 js库

我们开始吧！

BootStrap文件结构 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css

BootStrap安装 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap

BootStrap基本框架全局设置网格系统布局响应式设计 http://twitter.github.com/bootstrap/scaffolding.html

BootStrap基本框架全局设置 <!DOCTYPE html> <html lang="en"> ... </html>

Bootstrap 网格系统固定网格 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>

Bootstrap 布局固定布局 <body> <div class="container"> ... </div> </body> <div

BootStrap 响应式布局 http://www.w3cplus.com/search/node/responsive <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Bootstrap 基本样式标题、段落排版本代码表格表单按钮产品列表 Icons http://twitter.github.com/bootstrap/base-css.html

Boostrap 交互功能 http://twitter.github.com/bootstrap/components.html

BootStrap js http://twitter.github.com/bootstrap/javascript.html

Boostrap 动态编译 https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/twitter/bootstrap/tree/master/less LESS AND SASS

BootStrap 自定义选择组件选择js插件定义变量下载源码

能兼容可怕的IE？ https://github.com/airen/Bootstrap-IE6 http://jslegers.github.com/jquery-bootstrap/

你想学？ http://www.w3cplus.com/source/the- best-bootStrap-resources.html 8个代码生成器 9个工具 4个优秀主题 11个js库 11篇优秀教程

Q && A？

网名：大漠，W3cplus创始人，现居上海，从事 Web前端和手游工作，对HTML5、CSS3、移动端、前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群：