Bootstrap入门学习
********Bootstrap框架********
****Bootstrap详情****
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前台框架。
它是为实现快速开发Web应使用程序而设计的一套前台工具包。
它支持响应式布局，并且在V3版本之后坚持移动设施优先。
****为什么要用Bootstrap？****
在Bootstrap出现之前：
命名：重复、复杂、无意义（想个名字吃力）
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
在用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
****Bootstrap下载****
官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
****Bootstrap环境调试****
目录结构：
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js
解决依赖
因为Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。
****Bootstrap全局样式****
排版、按钮、表格、表单、图片等我们常使用的HTML元素，Bootstrap中都提供了全局样式。
我们只需在基本的HTML元素上通过设置class就能够应使用上Bootstrap的样式，从而使我们的页面更美观和谐。
**标题相关**
*标题*
一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
*副标题*
一级标题小标题
**文本对齐**
文本左对齐
文本居中
文本右对齐
**文本大小写**
Lowercased text.
Uppercased text.
Capitalized text.
**表格**
Class 形容
.table-striped条纹状表格
.table-bordered带边框的表格
.table-hover鼠标悬停变色的表格
.table-condensed紧缩型表格
.table-responsive响应式表格
**状态类**
Class 形容
.active鼠标悬停在行或者单元格上时所设置的颜色
.success标识成功或者积极的动作
.info标识普通的提醒信息或者动作
.warning标识警告或者需要使用户注意
.danger标识危险或者潜在的带来负面影响的动作
**表单**
内联表单
表单状态
带图标的表单
**按钮**
Link
*按钮样式*
*按钮大小*
**图片**
*图片形状*
**辅助类**
*文本颜色*
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
*背景颜色*
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
http://toutiao.com/group/6600625038683013646/…
*关闭按钮*
*下拉三角*
*快速浮动*
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Bootstrap入门学习
