以及项目组相关组员bootstrap培训_第1页
以及项目组相关组员bootstrap培训_第2页
以及项目组相关组员bootstrap培训_第3页
以及项目组相关组员bootstrap培训_第4页
以及项目组相关组员bootstrap培训_第5页
已阅读5页，还剩22页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PPBootstrap培训PPTBootstarp之简介Bootstarp之CSSBootstarp之组件Bootstarp之Javascript插件2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK

OTTO和JacobThornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于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设置全局CSS样式，基本的HTML元素均可以通过class设置样式并得到增强效果，还有先进的栅格系统。概览栅格系统排版代码表格表单按钮图片工具class响应式工具（见附件）

简介完HTML5文档类型移动设备优先width-viewport宽度height-viewport高度initial-scale-初始缩放比例minimum-scale-允许用户缩放小比例maximum-scale-允许用户缩放大比例user-scalable-用户否手动缩放响应式图片（见附件）排版和链接Normalize为了增强跨浏览器表现的一致性，我们使用了Normalize，这是由Nicolas

Gallagher和Jonathan

Neal维护的一个

reset库。（见附件）栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。Bootstrap栅格系统的工作原理：“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。使用“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。类似Predefined

grid

classes

like.row

and

.col-xs-4这些预定义的栅格

class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。标题–

HTML中的所有标题标签，从<h1>到<h6>均可用。另外，还提供了.h1到.h6class，为的是给inline属性的文本赋予标题的样式。页面主体–

Bootstrap将全局font-size设置为14px，line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外，<p>（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。强调直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。缩略语当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上,但需要包含title属性。地址让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。引用在你的文档中引用其他来源的内容。列表顺序无关紧要的一列元素。顺序至关重要的一组元素。移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。通过设置display:inline-block;并添加少量的内补，将所有元素放置于同一列。.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起，随着导航条逐渐展开而排列在一样。带有描述的短语列表。（见附件）内联代码在正文中通过<code>标签包裹内联样式的代码片段。For

example,

<code>echo

'fangliang';</code>

should

be

wrapped

asinline.基本代码块多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。<pre><p>Sample

text

here...</p></pre>基本案例为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。条纹状表格利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。带边框的表格利用.table-bordered为表格和其中的每个单元格增加边框。鼠标悬停利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。（见附件）紧缩表格利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。状态class通过这些状态class可以为行货单元格设置颜色。响应式表格将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。（见附件）选项尺寸– 需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。（见附件）

CSS完图片– 为<img>元素增加不同的class，就可以轻松的改变其样式。（见附件）下拉菜单将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position:relative;的元素。然后添加组成菜单的HTML代码。对齐选项给下拉菜单.dropdown-menu加上.pull-right使文字右对齐。禁用的菜单项给下拉菜单中的<li>加上.disabled禁用链接。（见附件）基本案例把一系列的.btn按钮放入.btn-group。按钮工具栏把一组<div

class="btn-group">组合进一个<div

class="btn-toolbar">做成更复杂的组件。尺寸只要给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。嵌套想要把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中。（见附件）（见附件）（见附件）激活和禁用状态链接在不同情况下可以定制。给不能点击的链接用.disabled并且用.active显示是当前页。尺寸想要更小或更大的分页？要得到更多尺寸，加上.pagination-lg或.pagination-sm吧。翻页用轻便的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。（见附件）

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论