web高薪就业班27期全套课程代码1bootstrapbootstrap课件

1、第一章：bootstrap1.1 初识官网地址：/bootstrap 是最受欢迎的 HTML，CSS 和 JS 框架，用于开发响应式布局，移动设备优先的WEB 项目。（其实也可以理解为 就是 css 框架，通过 css 样式来实现的，80%都是 css 部分，兼容 IE7 以上的浏览器，谷歌，火狐等浏览器兼容性不错）1.2 版本版本：3.3.7第二章：bootstrap 使用2.1 官网下载2.1.1 bootstrap 安装包2.1.2 目录结构2.2 项目中如何使用2.2.1 引入需要的文件将 bootstrap-3.3.7-dist 文件夹直接拷

2、贝到项目中（也可以更改文件夹的名字），Html 页面中引入：第三章：全局css 样式3.1 概览3.2 布局容器bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。3.3 栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport） 尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面

3、布局，你的内容就可以放入这些创建好的布局中。注：要引入 holder.min.js 文件A:多余的列（column）将另起一行排列(当大于 12 时）B:嵌套列C:左边空一个位置 col-md-offset-33.4 排版1.标题（.page-header） 2.段落（.lead）3. marke 标记4. del 删除线5.s 删除线6.ins 插入文本7.small 小号字体8.文本对齐9.abbr10.pre 代码块11.kbd 键盘键提示12.code 代码3.5 表格1,table2. Table-striped3. Table-bordered4. Table-hover 表格的颜

4、色： 1, .infor2. .success3. .active4. .warning5. .danger响应式表格：3.6 表单类说明form-group分组form-control输入框的外观3.7 按钮外观.btn.btn btn-default.btn btn-primary.btn btn-success.btn btn-warning.btn btn-danger.btn btn-link大小.btn-lg.btn-sm.btn-xs按钮独占一行：.btn-block禁 用 按 钮 : Disabled（属性）3.8 图片注：Ie8 以下 不支持 css3 中的圆角属性3.9 文

5、字颜色，背景颜色，关闭按钮，三角形，浮动说明类文字颜色.背景颜色.关闭按钮×箭头浮动pull-right， pull-leftclearfix第四章：css 组件4.1 Glyphicons 图标4.2 下拉菜单类.dropdown菜单.dropdown-toggle切换.dropdown-menu菜单.dropup向上.dropdown-menu-right对齐.dropdown-header头部分割线.disabled隐藏4.3 按钮组类说明.btn-group 按钮组btn-group-sm btn-group-xs 4.4 输入框组$.004.5 导航类说明效果class=

6、nav nav-tabs标签页导航class=nav nav-pills胶囊式导航class=nav nav-pills nav- stacked胶囊式垂直方向堆叠导航4.6 导航条.4.7 路径导航HomeLibraryData4.8 分页«12345»4.9 标签NewPrimarySuccessInfoWarningDanger4.10 徽章给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。Inbox 42 Messages 44.11 巨幕延伸至整个浏览器视口来展示网站上的关键内容。Hello, world!.Learn more如果需要让巨幕

7、组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。.4.12 页头页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。Example page header Subtext for header4.13 缩略图.4.14 警告框.4.15 进度条60%4.16 媒体对象Media heading.4.17 列表组Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibu

8、lum at eros4.18 面板 Basic panel example第五章：js 插件5.1 模态框（弹窗）1，模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。data-toggle=modal模态class=modal-dialog对话框class=modal-content内容class=modal-header头部class=modal-body体部class=modal-footer底部5.2 下拉菜单.dropdown5.3 滚动 滚动插件是用来根据滚动条所处的位置来自动更新导航项的scrollspy();1. 的是 body 元素，所以 body 需要相对定位2. data-offset=1103. data-spy=scroll4. 通过 id 进行关联5.4 标签页data-toggle=tab方法.tab-content标签页的内容.tab-pane面板.active默认选中状态.fade in效果.fade效果5.5 工具提示.data-toggle=tooltipJs 中的用法$(data-to