Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
前端框架利器——bootstrap.pdf
Search
w3cplus
November 08, 2012
3
2.2k
前端框架利器——bootstrap.pdf
w3cplus
November 08, 2012
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
CSS Future
w3cplus
2
610
Web Animation
w3cplus
5
470
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
560
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
510
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Why Our Code Smells
bkeepers
PRO
337
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Practical Orchestrator
shlominoach
188
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
网名:大漠,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> <!-- 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>
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"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </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]