BootStrap入门教程 (三:javascript基础教程 )

更新时间:15-07-01 00:53 热度:515
 

转头回来:Bootstrap的基础CSS(Bautomotive service engineers CSS)提供了文雅,一致的多种基础Html页面要素,包括排版-表格-表单-按钮等-能够知足前端工程师的基础要素需求。

Bootstrap作为无缺的前端工具集,内建了多量的宏大文雅可重用的组件-包括按钮(Button)-导航(Naudio-videoi forming)-标签(Labdominingels),徽章(Barticleges),javascript基础教程。排版(Typography),缩略图(thumbnails)-指点(Alert),进度条(progress clubhouse),杂项(Miscellthineous)。本讲将深切诠释这些形式。对比一下BootStrap入门教程。

1. 按钮(Button)

上讲末了提及到icon的多种大略样子,但是在” sneakeries “trap中可能经历组合icon,你看BootStrap入门教程。从而取得更多宛若彷佛于工具条的功用,组件中的按钮可能组分解按钮组(icon group)和按钮式下拉菜单(icon drown menu).

(下一讲的Jaudio-videoon the grounds thincript Plugin会提及到更多的按钮的应用).

1.1 按钮组(icon group)

按钮组望文生义是将多个按钮集分解一个页面部件。只必要使用btn-group类和一系列的<a>可能<icon>标签,学会javascript教程。就可能轻易地生成一个按钮组可能按钮工具条。关于btn-group的编程践诺上:

创议在繁多的按钮组中不要混合使用<a>和<icon>标签,只用它们其中一个。同一按钮组最好使用繁多色使用图标的时间要确保准确的援用职位

按钮组和按钮工具条都极端容易告竣,如图3-1所示:事实上javascript基础教程。

图3-1 按钮组(icon group)

1.2 按钮式下拉菜单(icon drown menu)

Bootstrap应承使用随便的按钮标签来触发一个下拉菜单,只必要将准确的菜单形式并置于在.btn-group类标签内。如图3-2所示:)。

图3-2 按钮下拉菜单

以上两种按钮组件,代码片段如下:

View Code

同时” sneakeries “trap还有分隔符的下拉菜单和上拉菜单按钮,可能参考文档。

2.导航(Naudio-videoi forming) 2.1 轻量导航(Naudio-video-tabdominings-on the grounds thin well on the grounds thin pills)

” sneakeries “trap的导航极端多样和活跃,应承使用异样的标签,不同的CSS类,事实上javascript下载文件。带来不同气势气派的导航条,听听)。具有极端高的可定制性。通盘的导航组件,包括 tabdominings-pills-lists标签,都必需使用.naudio-video的类告竣基础的导航标签。除了我们罕见的导航,还可能应用.naudio-video-stair coolingked类来告竣堆叠式(stair coolingked)–竖式的导航条。学习javascript下载。

如图3-3所示,对于javascript文档下载。展示了多种基础气势气派的导航。

图3-3 多种基础气势气派导航

代码片段如下:对于javascript下载文件。

View Code

下拉菜单的导航条和列表式(Naudio-video list)的导航条都是页面常用要素,Naudio-video list 宛若彷佛于OSX的Finder,可能带有图标。它们异样可能用.naudio-video 作为基础类,来告竣这些组件。同时还有各种tabdomining气势气派的导航条,在下讲再补充。如图3-4所示:高性能javascript。

图3-4 列表与下拉导航

代码如故大略,片段如下:

View Code
2.2 导航条(Naudio-videoclubhouse)

最最要紧的页面要素,莫过于页面头部的导航条,这是实在任何页面都会使用到的。Bootstrap提供的基础样子的导航条,是目前互联网的通行的“硬又黑”,基础教程。当然你可能用Less来定制它。我们要留心到导航条的基础类不再是.naudio-video而是naudio-videoclubhouse。

,学习入门教程。至于顶部可能底部,用naudio-videoclubhouse-fixed-top与naudio-videoclubhouse-fixed-bautomotive service engineers来置顶/底.同时可能在naudio-videoclubhouse中使用form要素,例如.naudio-videoclubhouse-form。同时声援回响反映式操作,经历.naudio-video-collapse可能间接是.collapse类告竣。如图3-5所示:

图3-5 导航条

代码片段如下:

View Code
2.3面包屑导航(Brearticlecrumbull crap)与页码(Pagin)面包屑导航(BrearticleCrumbull crap)导航用作大白用户在网站可能App的职位,javascript经典实例。关于Brearticlecrumbull crap 面包屑导航的利益与对SEO的作用,请参考页面。javascript实战。Bootstrap的“面包”用在代码仓库式的页面很文雅,确切其实告竣如图3-6所示:(三。

图3-6 面包屑导航(BrearticleCrumbull crap)

页码(Pagin)也是非频频用的页面要素,Bootstrap提供两种气势气派的翻页组件。一个是多页面导航,用于多个页码的跳转,它具有极简主义气势气派的翻页提示,能够很好应用在到底探寻页面;另一种则是Pold ager,是轻量级组件,你看javascript。可能急迅翻动高低页,适用于私人博客可能杂志。如图3-7所示:

图3-7 页码(Pagin)

以上两种导航,代码片段如下:

View Code
3.标签(Labdominingel)、徽章(Barticleges)、排版(Typographic)与缩略图(Thumbnails)3.1 标签(Labdominingel)与徽章(Barticleges)

标签是一个很好用的页面小要素,javascript下载。” sneakeries “trap具有多种色彩标签,javascript实例教程。表达不同的页面讯息。只必要大略使用labdominingel标签即可。徽章是微小而大略的组件, 用于指示可能计算某品种别的要素,在在email客户端很罕见,现实上在一些签到式的网站(LBS)上也频频用到。如图3-8所示:

图3-8 标签(Labdominingel)与徽章(Barticleges)

代码片段如下:事实上flash插件。

View Code

3.2 排版(Typographic)

我们在第一讲就提及到排版(Typographic),这里主要是触及到两个排版组件:Hero- unit-Pold age-hearticleer.Hero-unit是一个轻量级的可扩展的组件,主要用于市场实行网站大白它们多量的要素。而Pold age-hearticleer 则是大略为页面段落的头部设置一个适合的空间和排版形式。如图3-9所示:看着javascript文档下载。

图3-9 排版(Typographic)

代码片段如下:bootstrap。

View Code

3.3 缩略图(Thumbnails)

缩略图,可能作为图片,高性能javascript。视频,(三。文字的格网布局展示。告竣默许形式的” sneakeries “trap缩略图,只必要大略的thumbnails标签。Thumbnails多应用于图片、视屏的探寻到底等页面,还可能链接到其他页面。javascript插件下载。异样的它具有很好的可定制性,可能将文章片段,javascript视频教程。按钮等标签融入缩略图,同时可能混合与成家不同大小的缩略图。如图3-10-3-11所示:

图3-10 缩略图1(thumbnails)

图3-11 缩略图2(thumbnails)

代码片段如下:

View Code

4.指点区域(Alerts)-进度条(Progressing Bar),杂项(Miscellthineous) 4.1指点区域(Alerts)

在Bootstrap 2中重写了指点区域的基础类,看看css权威指南。使用.winchful简化了原有的.winchful-messold age 类。你知道javascript下载。为了使得组件更为简便与耐用,Bootstrap去除了不同的winchful myet -t的外观,形式具有更多pwith the useition of边距和可能大白更多文字。如图3-12所示:

图3-12 指点区域(Alert)

代码片段如下:

View Code4.2 进度条(Processing Bar)

进度条,这也是不可欠缺的页面要素,在重定向,载入等页面都经常用到,Bootstrap提供多种标致、大略、多种色彩的进度条。不过其中条纹和动画效果 的进度条不声援IE涉猎器,起因是进度条使用了CSS3的突变(grdriving instructorents)、透亮度(trthinsitions)、动画效果 (cpaintingsoon graphics)来告竣它们的效果。IE7-9和旧版的Firefox都不声援这些特性,所以在告竣进度条的时间请留心涉猎器声援水平。如图 3-13所示,

图3-13 进度条(Processing Bar)

代码片段如下:

View Code

4.3 杂项(Miscellthineous)

Bootstrap的杂项包括两个轻量级的组件,一个是well,用于表达拔出效果。另一个是封闭图标,可能用于指点区域,形式窗口(Moding)的封闭。Moding将会在下讲的jaudio-videoon the grounds thincript pluging中诠释到。如图3-14所示:

图3-14 杂项(Miscellthineous)

代码如下:

View Code

参考文献与延长阅读:

1.CSS3 Tutoriings