概述:
为学习Boostrap做一些准备工作
本章涉及内容:
- 下载和定制Boostrap
- Bootstrap的文件结构
- Boostrap应用解析
- 开发第一个Boostrap示例
2.1 下载和定制Boostrap
2.1.1 下载Boostrap
有两个版本: 学习使用的完全版, 供应用的编译版
1.下载源码Bootstrap
2、下载编译版Bootstrap
网址:Bootstrap编译版
2.1.2 定制Bootstrap
量身定制,为我所用
网址:点击打开链接
选择LESS
选择 jQuery 插件:
接下来就是精细的设置:
具体细节:
Colors: 主要设置网址风格基调
Scaffolding :全局样式,链接,文本
Typeography :字体相关
Iconography:图标相关
Components : 组件的相关,例如大小,点击效果,是否倒角
Tables:表格相关
Buttons: 按钮相关
Form:表单
Dropdowns :下拉菜单
Media queries breakpoints : 设置媒体查询断点 ,屏幕的适应性
Grid System:定义网格系统
Container Sizes : 定义容器的大小
Navabar:导航栏相关的
Tabs : tab标签页
Pagination : 分页相关
Pager: 分页器
Jumbotron:超大屏幕
Form states and alerts : 表单状态和警告框
Tooltips:提示
Popovers:弹出框
Labels:标签
Modals:模态弹出框
alerts: 警告框
Progress bars : 进度条
list group : 列表组
Panels : 面板
Thumbnails:图文混排
填完之后:
下载编译就可以了
还可以去官网下载:
地址:http://getbootstrap.com/getting-started/#download
文件结构:
1.编译版结构
2.源码版的