Bootstrap

1. 下载bootstrap文件
   
   • 网站有英文网站和中文网站，生产使用版本进行开发，这个版本已经编译过了。另外bootstrap是有js
     部分jQuery实现，需下载jQuery
     
     • 内容包括 .map文件：预处理文件 min后缀是压缩后
     • bootstrap简介：一个前端样式框架，全局命名样式
     • 创建第一个demo 需要jQuery css js都引入

    <link rel="stylesheet" href="./css/bootstrap.min.css">    <script src="./jQuery/jquery-migrate-1.4.1.min.js"></script>    <script src="./js/bootstrap.min.js"></script>

1. 排版-标题
   
   • .h1~.h6
   • 副标题 small
   • 文本
     
     • 段落 p 文本标记：文字背景mark 删除del 下划线ins或u 加粗strong
     • 对齐方式 .text-left .text-center .text-right
     • 大小写 小写.text-lowercase 大写.text-uppercase 首字母大写.text-capitalize
2. 排版-表格
   
   • table标签 带边框.table-bordered 条纹状.table-striped 悬停变色text-hover 紧凑风格.table-condensed
   • 表格颜色处理
3. 排版-表单
   
   • form表格，方便提交表单数据 分组水平排版.form-inline
   • div标签包裹 组件形式.form-group
     
     • 文字提示label == .placeholder 配合div标签.has-error 来.control-label 处显示颜色
     • input输入框 样式.form-control 变大input-lg
     • select 下拉菜单 样式.form-control 变小input-sm
     • 文本域 样式.form-control
       
       1. 按钮
   • 圆角 .btn
   • 颜色 白色.btn-default 红色danger 黄色warning 绿色success 灰的active 深蓝色 primary 灰的error 亮蓝info 无颜色default
   • 连接 .link
   • 大 .btn-lg 小 .btn-sm 全屏显示 .btn-block
   • 禁用 disabled = “disabled”
     
     1. 图片
   • 圆角 .img-rounded
   • 圆形 .img-circle
   • 带边框圆形图形 .img-thumbnail
     
     1. 辅助类
   • 文本颜色
   • 背景颜色
   • 状态颜色
   • 三角符号
     
     1. bootstrap视窗，适应手机 平板 一般屏幕 大屏幕
   • 栅格系统 12份， 表示1/4的区域 .col-lg-3 整屏 .col-lg-12 偏移1/4的位置 .col-lg-offset-3
   • 视窗viewpoint 检测屏幕大小@media screan 用户放大 .user-scalable 初始化 .initial-scale
     最大放大 .maximum-scale 最小缩小 .minimum-scale
   • 手机端边框变粗的原因是，pc端的1px对应一个像素，而手机上一个px对应多个像素点
   • 响应式网页
     
     1. 单位
   • px 屏幕分辨率
   • em 继承父元素，适合手机端大小调整
   • rem 继承根元素，稳定，只需要修改 html{font-size: 62.5%} 达到10px
   • 以上元素可后边的覆盖前边的定义
     
     1. 字体图标
   • glyphicons css有字体文件路径可以直接应用对应的图标的名字
   • 阿里图标 iconfont
     
     1. 导航 <nav>
   • 无序列表 .nav 可切换导航 .nav-tabs 胶囊导航 .nav-pills 垂直导航 -.nav-justified 垂直 .nav-stacked
   • 默认选中active
     
     1. 组件：零件的组合
   • 按钮(Button),导航(Navigation)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)
   • data- 自定义属性页面，显示不影响，管理数据传递
     
     1. 下拉菜单
   • 控制组件为下拉 .dropdown
   • 单元 .dropdown-menu 切换.dropdown-toggle
   • 角标 .caret
     
     1. 输入控件组
   • 输入控件 .input-group 控件组图标 .input-group-addon
     
     1. 分页
   • 父元素中添加分页 .pagination 变大 .pagination-lg
   • 放置在分页区域 .pager 链接左对齐 .previous 链接右对齐 .next
     
     1. 进度条 .process
   • 内容 .process-bar style=”width:60%”
   • 进度条用条纹装饰 .progress-bar-striped
     
     1. 列表
   • 列表组 .list-group 元素 .list-group-item 状态数 .badge 选中状态 .active 禁用 .disabled
     
     1. 面板 .panel
   • 面板头部 .panel-heading 面板内容 .panel-body 面板注脚 .panel-footer
     
     1. bootstrap.js 插件
        Bootstrap作为一套良好的前端工具，要实现现代的动态页面效果，javascript插件是必不可少的。它提供了12个基于JQuery类库的插件。
   • 弹窗插件 data-toggle=”” data-target=””
     模态窗口 .modal-dialog .modal-content .modal-header .model-body .model-footer
     关闭按钮 data-dismiss=”modal” .close ×