Bootstrap3--简易入门

Bootstrap3简易入门1Bootstrap中文网2目录什么是Bootstrap?为什么使用Bootstrap？Bootstrap下载？1.1.1.1.2.如何使用？1.3.定制（customize）1.4.CSS2.组件3.4.JS插件1.5.浏览器支持情况1.什么是Bootstrap?32011年，Twitter的MarkOtto，JacobThornton工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、简洁、可定制、最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。2011年8月作为一个开源的产品发布在GitHub上，并2014年6月在GitHub最受欢迎第一项目!1.1.为什么使用Bootstrap?4Bootstrap的优势:1.易于使用:只要基本的HTML和CSS知识就可以开始使用。2.响应式特性:响应式CSS调整自适应手机,平板电脑和桌面。3.手持设备优先:在bootstrap3中,手持设备优先是核心框架的一部分。4.浏览器兼容性:兼容所有现代浏览器Chrome,Firefox、ie、Safari和Opera。1.2.Bootstrap下载5下载源码地址：如何使用？6只须在页面上加入bootstrap的css和js，及依赖jquery就可以进行开发了！1.4.定制（customize）个性化定制地址：浏览器支持情况89目录全局CSS样式布局容器栅格系统2.2.1.2.2.表格2.3.表单2.4.组件3.4.JS插件按钮2.5.2.全局CSS样式10设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统。11Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。2.1布局容器12Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。2.2栅格系统13为任意table标签添加.table类可以为其赋予基本的样式2.3表格2.3.1条纹状表格通过.table-striped类可以给tbody之内的每一行增加斑马条纹样式2.3.2带边框的表格添加.table-bordered类为表格和其中的每个单元格增加边框。142.4表单15为a、button或input元素添加按钮类（buttonclass）即可使用Bootstrap提供的样式。2.5按钮16目录组件下拉菜单导航3.3.1.3.2.面板3.3.进度条3.4.4.JS插件173.组件无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、分页、面板等更多功能。18将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position:relative;的元素。然后加入组成菜单的HTML代码。3.1下拉菜单19Bootstrap中的导航组件都依赖同一个.nav类。3.2导航20默认的.panel组件，通过.panel-heading可以很简单地为面板加入一个标题容器。你也可以通过添加设置了.panel-title类添加面板标题。3.3面板21默认的.progress组件，为.progress-bar-striped添加.active类，使其呈现出由右向左运动的动画效果。IE9及更低版本的浏览器不支持。3.4进度条22目录JS插件弹窗modal.js轮播carousel.js4.4.1.4.2.页面固定块affix.js4.3.4.js插件23jQuery插件为Bootstrap的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。24只需一行JavaScript代码，即可通过元素的idmyModal调用模态框：$('#myModal').modal(options);4.1弹窗modal.js25调用轮播js：$('.carousel').carousel();4.2轮播carousel.js26调用页面固定块js：$(‘#myAffix’).affix({});4.3页面固定块affix.js应用：页面跟随式导航块实例Example27Q&A28THANKYOU!29