Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

前端框架利器——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
2.2k
3

 前端框架利器——bootstrap.pdf

Avatar for w3cplus

w3cplus

November 08, 2012

More Decks by w3cplus

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

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
4
450
Leo the Paperboy
Avatar for Maya Tellez mayatellez
9
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
450
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
440
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
930
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k

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]