-
Notifications
You must be signed in to change notification settings - Fork 69
/
1038-css-8.html
157 lines (144 loc) · 7.31 KB
/
1038-css-8.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>PPT</title>
<link rel="stylesheet" href="bootstrap/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="bootstrap/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="bootstrap/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank" />
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>bootstrap栅格系统</h2>
<h3>小课堂</h3>
<p>分享人:火建强</p>
</section>
<section>
<p>目录</p>
<p>1.什么是bootstrap</p>
<p>2.栅格布局</p>
<p>3.使用方法</p>
<p>4.缺点、优点</p>
<p>5.编码实战</p>
<p>6.更多讨论</p>
</section>
<section>
<h3>1.什么是bootstrap</h3>
</section>
<section>
<p>Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。</p>
<p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 [1] 它由Twitter的设计师Mark
Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
News都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</p>
</section>
<section>
<h3>2.栅格系统</h3>
</section>
<section>
<p></p>
<p>Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。</p>
<p>网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。</p>
</section>
<section>
<h3>3.使用方法</h3>
</section>
<section>
<p>1.文件引用</p>
<p><a href="http://www.bootcdn.cn/bootstrap/">CDN</a></p>
<p><a href="http://v3.bootcss.com/components/#list-group">bootstrap中文网</a></p>
<p>如何引用</p>
</section>
<section>
<p>1.container</p>
<p>2.row</p>
<p>3.col-xs- col-sm- col-md- col-lg-</p>
<p>如何使用</p>
<a href="演示/offest.html">列偏移</a>
</section>
<section>
<h3>4.优点、缺点</h3>
</section>
<section>
<h3>优点</h3>
<p>BT的优势之一就是可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。实现这个功能依赖两个东西，一个是view，另一个是max-width，min-width。</p>
</section>
<section>
<h3>不足</h3>
<p>不能兼容IE</p>
</section>
<section>
<h3>5.编码实战</h3>
</section>
<section>
<h3>6.更多讨论</h3>
<a href="演示/4.0.html">4.0版本</a>
</section>
<section>
<h3>7.参考文献</h3>
<p>
<a href="http://v3.bootcss.com/css/#grid">bootstrap中文网 </a>
</p>
<p>
<a href="http://www.runoob.com/bootstrap/bootstrap-grid-system.html">菜鸟教程-栅格布局</a>
</p>
<p>前辈</p>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>武汉-web-12-火建强</small>
</p>
</section>
</div>
</div>
<script src="bootstrap/head.min.js"></script>
<script src="bootstrap/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: './plugin/markdown/marked.js' },
{ src: './plugin/markdown/markdown.js' },
{ src: './plugin/notes/notes.js', async: true },
{ src: './plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>