Bootstrap入门学习

Bootstrap框架学习Bootstrap入门学习HTMLdiv+css简述课程大纲HTML+css简介Bootstrap结构Bootstrap的简单使用!doctypehtml!--头部声明文档为html文件--htmllang=“en”!–html文件开始标签lang语言--head!--head标识页面头部信息--metacharset=UTF-8metaname=Authorcontent=metaname=Keywordscontent=metaname=Descriptioncontent=titleDocument/titlelinkhref='/images/favicon.ico'rel='icon'type='image/x-icon'/scripttype=text/javascriptsrc=/js/jquery.min.js/script/headbody!--页面主体显示部分--divclass=id=div/div/div/body!–主体部分结束--/html!–html闭合标签--HTML基本构成元素1.头部声明两种方式2.Head部分的常用声明文件及cssjs文件的引入3.Body主体部分的内容4.Html常用标签及不同声明中的写法5.Div+css排版6.Class与id的区别目的：了解html标签明白网页前端文件的构成及运行的过程BootstrapBootstrap是由Twitter的MarkOtto和JacobThornton开发的，用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架。DIV+CSS移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。容易上手：只要您具备HTML和CSS的基础知识，您就可以开始学习Bootstrap。Bootstrap结构基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。CSS：Bootstrap自带以下特性：全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件。您可以直接包含所有的插件，也可以逐个包含这些插件。定制：您可以定制Bootstrap的组件、LESS变量和jQuery插件来得到您自己的版本。Bootstrap结构bootstrap/├──css/│├──bootstrap.css│├──bootstrap.min.css│├──bootstrap-theme.css│└──bootstrap-theme.min.css├──js/│├──bootstrap.js│└──bootstrap.min.js└──fonts/├──glyphicons-halflings-regular.eot├──glyphicons-halflings-regular.svg├──glyphicons-halflings-regular.ttf└──glyphicons-halflings-regular.woff预编译版Bootstrap源码bootstrap/├──less/├──js/├──fonts/├──dist/│├──css/│├──js/│└──fonts/└──docs/└──examples/Bootstrap使用1.下载bootstrap:2.在html文档中加载bootstrap相关的文件（jquery.js、bootstrap.min.js和bootstrap.min.css文件）注意：为了Bootstrap开发的网站对移动设备友好，确保适当的显示和触屏缩放，需要在网页的head中增加viewport视口metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=noheadlinkhref=“css/bootstrap.min.css”rel=“stylesheet”!–引入bootstrap--scriptsrc=“”/script!–引入jquery--/headbodyscriptsrc=“js/bootstrap.min.js”/script!–引入bootstrapjs,注：因bootstrapjs基于jquery务必之前引入jquery--/bodyBootstrap基本引入代码headmetacharset=utf-8metaname=viewportcontent=width=device-width,initial-scale=1!--移动设备优先--metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=notitleTitle/titlemetaname=Keywordscontent=keywordsmetaname=Descriptioncontent=Description!--Bootstrap--linkhref=css/bootstrap.min.cssrel=stylesheetlinkhref=css/bootstrap-theme.min.cssrel=stylesheetlinkhref=css/style.cssrel=stylesheet!--[ifltIE9]!–兼容html5标签--scriptsrc==![endif]--scriptsrc=js/jquery.min.js/scriptscriptsrc=js/bootstrap.min.js/script/headBootstrapCSS1.Bootstrap栅格系统2.Bootstrap排版3.Bootstrap代码4.Bootstrap表格5.Bootstrap表单6.Bootstrap按钮7.Bootstrap图像Bootstrap容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。.container类用于固定宽度并支持响应式布局的容器。Copydivclass=container.../div.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。Copydivclass=container-fluid.../div容器内嵌套栅格系统Bootstrap栅格系统Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列媒体查询：用来创建Bootstrap网格系统中的关键的分界点，根据不同的视口大小显示不同的内容Bootstrap栅格系统Bootstrap栅格系统额外的小设备收集（768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的最大容器宽度None(auto)750px970px1170pxClass前缀.col-xs-.col-sm-.col-md-.col-lg-列#12121212最大列宽Auto60px78px95pxBootstrap栅格系统Bootstrap栅格系统-列嵌套divclass=row!--嵌套--divclass=col-md-8divclass=rowdivclass=col-xs-8col-sm-6col-xs-8col-sm-6/divdivclass=col-xs-4col-sm-6col-xs-4col-sm-6/div/div/divdivclass=col-md-4.col-md-4/div/divBootstrap排版1.内联子标题h3我是标题3h3.small我是副标题3h3/small/h32.强调smallstrongem3.缩写abbrtitle=WorldWideWed地址address/address5.引用6.列表Bootstrap代码1.Bootstrap允许你以两种形式显示代码：code标签pre标签注意：请确保你使用pre和code标签时，开始标签和结束标签使用Unicode变体<>2.googleprettify插件的使用注意：要显示代码行号增加样式：li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:decimal;}.linenums{padding-left:5px}Bootstrap表格Bootstrap支持原来的表格元素tablethead：表格标题行容器元素tbody：表格主题内容trtdth：表头(必须在thead中)caption：表格存储内容的总结Bootstrap表格类class=table设置内边距以及水平分割线class=table-striped在内容主体上看到条纹class=table-bordered表格周围增加边框class=table-hover隔行换色class=table-condensed精简表格Bootstrap表格上下文类上下文类，用来改变表格行或单个单元格背景颜色class=activeclass=successclass=warningclass=danger响应式表格divclass=table-responsivetable/divBootstrap表单布局Bootstrap提供了下列类型的表单布局：垂直表单内联表单水平表单Bootstrap垂直表单创建基本表单的步骤：1.向父form元素添加role=form2.把标签和控件放在一个class=form-group的div中，获取最佳间距3.向所有的文本元素inputtextareaselect等，添加class=form-controlBootstrap内联表单如果创建一个表单，他的所有元素是内联的，向左对齐，请向form标签中添加class=form-inline默认情况下，Bootstrap中的input、select和textarea有100%宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。使用cla