Upgrade to Pro — share decks privately, control downloads, hide ads and more …

前端框架利器——bootstrap.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for w3cplus w3cplus
November 08, 2012
3
2.2k

 前端框架利器——bootstrap.pdf

Avatar for w3cplus

w3cplus

November 08, 2012
Tweet

More Decks by w3cplus

See All by w3cplus
手淘互动动效探索
Avatar for w3cplus w3cplus
0
240
CSS Future
Avatar for w3cplus w3cplus
2
640
Web Animation
Avatar for w3cplus w3cplus
5
500
CSS3带来的变化
Avatar for w3cplus w3cplus
0
1.5k
Web重构之道
Avatar for w3cplus w3cplus
1
2.8k
Sass带来的变革
Avatar for w3cplus w3cplus
2
630
Responsive小试牛刀
Avatar for w3cplus w3cplus
3
570
CSS预处器——Sass、LESS和Stylus实践
Avatar for w3cplus w3cplus
0
400
http协议与缓存简述
Avatar for w3cplus w3cplus
5
540

Featured

See All Featured
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
82
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
240
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
200
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
53k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
250
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
180
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k

Transcript

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

    1041263 新浪微薄: http://weibo.com/w3cplus E-mail: [email protected]

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

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

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

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

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

  7. 我们开始吧！

  8. 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

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

    --> <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>

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

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

  12. 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>

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

    class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div> 流体布局

  14. 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) { ... }

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

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

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

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

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

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

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

  22. Q && A？

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

    1041263 新浪微薄: http://weibo.com/w3cplus E-mail: [email protected]