学习笔记bootstrap之CSS组件

Posted 2020-06-28

小图标

新版Bootstrap提供了 200个小图标(相应地,提供了200个CSS样式),这200个样式 均可以在内联元素上应用,并显示出对应的图标。

 1）基本用法：在任何内联元素上应用所对应的样式即可。

                         所有的icon样式都以glyphicon-开头,这是因为这些小图标 都是http: /glyphicons.com/              网站提供,使用的时候必须同时使 用两个样式,即.glyphicon和以.glyphicon-*开头的样式。 

 2）实现方式：新版icon利用@font-face特性,并结合一定的字体,来制作Web页面中的icon图标。

                          语法：@font-face{

                                                 font-family: <YourWebFontName>;

                                                 src: <source> [< format >] [,<source> [< format >]]*;

                                                 [font-weight: < weight > ];

                                                 [font-style: < style >];

                                                  }

 3）应用场景： icon样式可以用在各种元素容器内,比如button元素、nav 列表元素等 。

 

 

下拉菜单

Bootstrap默认提供了通用的菜单显示效果,而且在各种交 互状态下的菜单展示需要和javascript的Dropdown插件配合才 能使用。 

1）基本用法:在菜单的父元素上 应用.open样式并且该元素设定为position: relative;的时候(或 者直接使用.dropdown样式),.dropdown样式是大容器,.dropdown- menu是菜单li元素的容器,而.divider样式在li元素上的显示效果 是分隔符。 下拉菜单才会正常显示。 除了分隔符以外,3.x新版还提供了一个菜单标题的功能(类似于分组标题),使用.dropdown-header样式, 

由于菜单默认情况下都是左对齐的,Bootstrap又额 外提供了一个.pull-right样式,可以使菜单相对于父容器右对齐 (注意.pull-right要和.dropdown-menu一起应用)。 

2)多级嵌套

老版是利用在.dropdown-meun样式中嵌套来实现类似的功能,做法是: 只需要在子菜单项上应用.dropdown-submenu样式,然后在li 元素里,和标准的菜单设置一样,内部嵌套一个新的ul元素即可 (在这个ul上也需要设置标准的.dropdown-menu样式)。

 

 

 

按钮组

1）基本用法：只需要在多个 按钮外部使用一个容器元素(比如div),然后在容器元素上应 用.btn-group样式即可。 容器里的按钮,可以使用button元素,也可以使用a元素, 产生的效果都是一样的。系统展示和排列的方式主要是由.btn- group样式和.btn样式来控制的, 

默认情况下,一组按钮的4个角都应该是圆角(支持 CSS3的话)。

2）按钮工具栏： 在多个分组外部放一 个大的容器元素,然后在容器元素上应用另外一个新的.btn- toolbar样式。

3）按钮尺寸设置： 可以使用.btn样式的3个额外的尺寸即.btn- lg、.btn-sm、.btn-xs来调整按钮大小, 

但是Bootstrap专门又为按钮组提供了额外的样式,以便不用在多个按钮上重复应用样式。其用法是:在.btn-group样式的元素上再次应用.btn-group-lg、.btn-group-sm、.btn- group-xs样式即可提供同样的效果,一次设置,全组都有效。 

4）嵌套分组：只需要将dropdown下拉菜单外部包装一个div 容器元素,并在div元素上重新应用.btn-group样式,并且和普 通的1、2、3按钮放在同一级即可。 

5）垂直分组：只需要将基础用法里的.btn-group样式替换 为.btn-group-vertical样式即可 。

6）自适应分组：.btn-group-justified样式提供了一个特殊的功能,就是在 一个.btn-group容器上,如果使用了该样式,则所有的按钮都会 100% 充满容器元素,即容器元素宽高有多少,按钮的宽高就会变 成多少, 

 

 

按钮下拉菜单

在普通的下拉菜单 的基础上封装了.btn样式的效果,就类似于单击一个button按 钮,然后显示隐藏的下拉菜单。

1）组合式下拉菜单：就是普通的下拉菜单,只不过将触发元 素从a元素换成了button元素(其实也可以在a元素上应用.btn样 式实现)。唯一不同的是外部容器的样式从.dropdown换成 了.btn-group。  

2）分离式下拉菜单：单击事件是通过 设置data-toggle="dropdown"和data-target=""来触发执行的,所以完全可以让箭头单独成为一个按钮,而原来的按钮继续保持,这样两个按钮排放在一起, 

3）按钮大小：不管是组合式下拉菜单还是分离式下拉菜单,都可以使 用.btn原来的附加样式.btn-lg、.btn-sm、.btn-xs来对按钮大小进行控制,。

4）向上弹起的下拉菜单：使用的时候和普通的下拉菜单相比只 要多附加一个.dropup样式即可。 

 

 

输入框组

1）基本用法：只需要在容器上 应用.input-group样式,然后对需要在input前后显示的个性元 素上应用.input-group-addon样式即可。

请尽量避免在select元素上使用该功能,因为WebKit浏览 器不完全支持input-group组件的特性。

不要直接将.input-group和.form-group混合使用,因 为.input-group是一个独立的组件。 

2）尺寸大小设置：Bootstrap在.input- group-addon样式容器上,也可以通过应用类似的样式达到设置 尺寸的目的,并提供了大型和小型样式(.input-group-lg 和.input-group-sm),未提供超小型的样式 。

3）复选框与单选框作为addon ：只需要在.input-group-addon样式 内放置带有checkbox和radio类型的input即可 。

4）按钮作为addon ：作者为.btn样式又单独设置了一 个.input-group-btn样式(基础用法里提到过),用其替 换.input-group-addon作为新的addon容器。 

5）下拉菜单按钮作为addon ：只需要在普通的.btn按钮上应用一个data- toggle="dropdown"属性即可。 

6）分段按钮作为addon ：所有的按钮都必须放置在.input- group-btn样式容器内。 

 

 

导航

导航(Nav)是一个网站最重要的组成部分,可以便于用户 查找网站所提供的各项功能服务。默认的.nav样式不提供默认的导 航,必须通过附加另外一个样式才行,比如.nav-tabs样式表示选项卡导航。 

1）选项卡导航：实现原理主要是让每个li项按照块级元素显示,然后定义 非高亮菜单的样式和鼠标触发行为,最后定义高亮菜单项的样式 和鼠标行为。 如果需要处理单击菜单,以便立即显示所对应tab的 内容区的话,需要配合JS组件里的Tab组件。 

2）胶囊式选项卡导航：将.nav-tabs样式替换为.nav-pills样 式,即可变换成完全不同的效果, 

3）堆叠式导航：所谓堆叠式导航,是将普通的导航菜单垂直堆放而已。只需要在nav-pills的基础上再附加一 个.nav-stacked样式即可。

4）自适应导航： 对于自适应导航,同按钮组的.btn-group-justified样式一 样,可以将li元素充满整个父容器,其样式为. nav-justified。使 用时只需要在.nav-tabs或.nav-pills样式基础上再附加上它就可 以了。

5）禁用链接：导航里的一个li元素菜单项需要禁用的话,可以和button元 素一样,应用disabled样式即可。这个样式仅仅是实现了禁用的外观效果,还不能真正防止单击以后的行为,所以还需要 用JavaScript代码对单击事件进行特殊处理(阻止冒 泡,e.preventDefault()、e.stopPropagation()、return false之类的代码)。 

无论是.nav-tabs还是.nav-pills样式的导航,都可以通过再 附加一个.pull-left或者.pull-right样式,来控制整个导航向左浮 动或向右浮动 

  

 

导航条

1）基础导航条：首先在普通导航的 ul元素上应用.navbar-nav样式,然后在外部父元素容器上应 用Navbar样式以及.navbar-default样式即可实现。

navbar样式的主要功能是设置左右padding、圆角等,但不 设置与颜色相关的内容,因为与颜色相关的内容是由.navbar- default样式来控制的。. 

2)导航条中的表单：在.navbar容器内放置form元素,然后在form 元素上应用.navbar-form样式即可。同时左右浮动的样式 (.navbar-left和.navbar-right)也可以使用,以便控制左右对 齐。 对于导航条内的表单,可以通过.sr-only样式来隐藏 label标签。 

3）导航条中的按钮、文本、链接 ：button(navbar-btn)、文本(navbar-text)、普通链接 (navbar-link) 

。如果单独应用button、文本或普通链接,将只支持一个, 或者最多两个(需要设置左右浮动),并且需要配合ul或者 navbar-brand样式的a元素一起使用。

4）导航条中的项进行左右浮动： 在导航条的各种菜单项容器(如ul、p等元素)上设 置.navbar-left样式或navbar-right样式,即可让该容器元素左 右浮动。这些样式是.pull-left和.pull-right的mixin版本,但是 它们被限定在了媒体查询中,这样可以更容易地在各种尺寸的屏 幕上处理导航条组件。 

5）顶部固定或底部固定 ：.navbar-fixed-top支持最顶部固 定,.navbar-fixed-bottom支持最底部固定。 在顶部固定的情况下,页面最顶部的其他内 容被遮盖住了(或者底部固定的情况下,网页最底部的内容也被 遮盖住了)。 要解决这个问 题,需要在body上设置padding值。由于默认的navbar高度是 50px,所以一般padding值设置为70px即可。 

.navbar-static-top样式,用于表示设置一个 100% 充满父元素容器的导航条。其实默认情况下使用navbar样 式的时候也是100%充满宽度的,.navbar-static-top样式的唯 一功能是去掉导航条的圆角设置。 

6）响应式导航条：button图标(icon)必须包含在.navbar-toggle 样式里, 根据响应式导航的要求,浏览器在大于768像素时,该icon 图标是不应该显示的。 

 7）反色导航条：反色导航的源码和.navbar-default几乎一样,不一样的只 是各种颜色设置, 如果要扩展自己的风格,请务必按照与.navbar-inverse一 样的代码进行颜色改变 。

  

 

 

面包屑导航

面包屑(Breadcrumb)一般用于导航,表示当前页面所在 的位置(或功能插件)。

 

 

分页导航

Bootstrap为大家提供了两种分页组件,一种是带多个页 码的组件(pagination),一种是只有上一页、下一页的翻页组件(pager)。

1）页码分页：只需要在ul上设置pagination样式,在li元素上设置页码链接即可。

                        对于分页,一般来说当前页面会高亮显示,并且不允许单 击。而在第一页的时候,上一页链接也不允许单击。为此 Bootstrap提供了两个通用的样式来实现,分别是:active和 disabled 。一般情况下,最终的方案是在上述两种样式的li元素里使用span元素而不是a元素。 

                        分页也支持增大和缩小风格,其 样式分别是:.pagination-lg和.pagination-sm。 

2）翻页：默认情况下,Bootstrap提供的这种组件是居中显示的。 

                 如果需要将两个按钮连接,分别进行左右对齐,则需要在按钮的li容器元素上分别应用previous和next样式, 在li元素上分别应用.pull-left和.pull-right样式也能实现上述效果, 另外,和普通的链接(或其他button元素)一样,应用 disabled样式可实现禁用效果, disabled样式只是实现禁用效果,并 没有禁用a链接的单击功能。所以如果要禁用单击功能,要么使用 JavaScript禁用a的单击行为,要么干脆使用span元素,因为分 页组件对a和span两种元素都同样支持。 

 

 

 

标签

Bootstrap提供了一个.label样式用于实现高亮的功能。 只需要在高亮的地方应用label样式即可。

label如果作用在链接元素上,hover和focus时的背 景颜色会稍微加深10% 。

label样式也提供了多种颜色的支 持,分别是成功绿,警示黄、危险红、信息蓝, 

 

 

对于作用域在href链接上的label样式,hover和 focus时的背景色也会相应地加深10%。 

可以像.btn一样扩展label的尺寸大小,例如label- lg、label-sm等类似的样式。 

 

徽章

在开发交互式系统或者信息系统时,经常要显示一些最新收 到的消息、需要有多少审批的消息等。Bootstrap的.badge样式提供了很好的效果,只需要在span或者label上应用该样式即可。

如果.badge样式应用的内部无内容时(例如:没有新 消息),.badge样式会自动消失。 

badge样式在按钮元素button或list-group-item和 nav-pills也可以有类似的样式,只是颜色稍有不同。 

 

大屏幕展播

在设计网页布局的时候,经常会有一些大屏(或大块头)内 容的显示,.jumbotron样式提供的展示效果正是我们所需要的,

 

页面标题

Bootstrap中的.page-header样式提供了类似h1元素的显示 效果,只不过margin和底部padding距离稍大一些,底部有1像 素的边框稍大一些。 

 

缩略图

结合12栅格系统,并使用.thumbnail 样式,可以将图像、视频、文本展示得更加漂亮。 

如果想像label和badge一样扩 展.thumbnail的样式,修改border: 1px solid #dddddd;代码即可。

 缩略图有两种使用方式,一种用于仅显示图片,另外一种利用容器将图片和标题显示在一起。可以在.caption样式的元素容器内,添加任意风格的元素, 比如按钮、链接等, 

 

 

 

警告框

在交互式网页中,经常要根据用户操作的上下文为用户提供 灵活的提示消息,比如操作成功、警告提示、错误信息等。.alert 样式为此提供了基础的操作样式。

 1）默认警告框：用带有alert样式的div元素容器包含的(p元 素也可以),内部可选地添加一个关闭按钮button元素,只不过 关闭按钮要确保设置button元素的属性值data- dismiss="alert",原因是警告框的关闭功能是通过JavaScript检 测该属性实现的 。

2）可关闭的警告框：在.alert样式上,再应用一个.alert-dismissable样式即可实 现一个可关闭的警告框。 

3）多彩样式警告框：在默认淡黄色的基础之上,另外提供了3种样式,分别是:alert- danger(危险红)、alert-success(成功绿)、alert- info(信息蓝)。 

4）警告框中的链接：Bootstrap在4种不同颜色的风格内都给链接颜色提供 了高亮,应用的方式都一样,在alert容器元素内的a链接上应 用.alert-link样式,从而达到想要的效果。 

 

进度条

1）基本样式：基本的进度条在使用的时候只需要应用两个样式:progress 和progress-bar。progress用于设置进度条的容器样式,而 progress-bar用于限制进度条的进度(颜色进度)。 

2）多彩样式：默认添加了4种颜色: progress-bar-info(信息 蓝)、progress-bar-success(成功绿)、progress-bar- warning(警告黄)、progress-bar-danger(危险红)。 

3）条纹样式：只是在容器元素上附加 了一个新的progress-striped样式,该样式的实现是利用CSS3 的线性渐变特性linear-gradient来实现的。 

4）动画样式：让条纹动起来，只需在进度条容器元素 上再多附加一个active样式即可。.active样式必须和.progress-striped样式一起应用才行。 而IE浏览器只有IE10以上才支持动画过渡效果。 

5）堆叠样式：progress-bar。

 

 

媒体对象

用以构建 不同类型的组件,这些组件都具有在文本内左对齐或右对齐的图 片(就像blog内容或Tweets等),默认样式是在内容区域的左侧 或右侧浮动一个媒体对象(图片、视频、音频)。

1）默认样式：一组媒体的默认使用方式通常包括如下几个样式:media、 media-object、media-body、media-heading 4个样式,和 一个用于控制左右浮动的pull-left(或pull-right)样式。 

2)媒体列表：如果需要将多个媒体进行列表展示的话,则可以利用在ul上 应用media-list样式、li上应用media样式来实现。 

 

 

列表组

1）基础列表组：大部分的列表组都是由无标记的列表(ul/li)来实现,然后 通过应用特定的样式实现效果。列表组有2个基本的样式:list- group和list-group-item。这两个样式主要是设置了基本的显示 和布局内容,比如间距、上下的圆角等。

2）应用徽章标记或导航箭头： 在li元素内部放置标记小图标的span元素(或其他内敛 元素label、i)即可。 

3）可链接的列表组 ：用普通的div元素代替ul元素,用a链接元 素代替li元素,并在a元素上应用list-group-item样式,即可达 到所想的效果。添加附加样式active的话,则会让该列表项高亮 显示。 

4）多彩列表项：该组件提供了类似list-group-item-succes的样式用于指定背景 颜色,同时也支持高亮样式active。 

5）自定义列表项：在可链接的列表组基础上,Bootstrap又提供了list-group- item-heading和list-group-item-text这两个样式,两个样式主要是控制在普通状态和高亮状态时的文字 (heading)颜色和内容(text)颜色。 

 

 

 

面板

1）基础面板：在div上应用panel,产生一个 具有边框的文本显示框。 pannel样式不控制主题颜色,pannel- default才是控制颜色的主题,而且还多了一个pannel-body样 式,专门用于存放文本内容, 

2）带有头和尾的面板 ：面板头(panel-heading)和面板尾(panel-footer)样 式,其功能是高亮显示相对应的面板头和面板尾。 

3）多彩面板：分别提供了5种颜色:panel- primary(重点蓝)、panel-success(成功绿)、panel- warning(警告黄)、panel-danger(危险红)、panel- info(信息蓝)。 只需要在现有panel的样式上,附加 一个颜色样式即可。 

4）面板与表格进行嵌套

5）面板和列表组进行嵌套：和表格的处理方式一样,列表组在面板里使用 时,Bootstrap作者也进行了微调,主要是调整边框重合的问 题,即如果两个组件都有底部边框,那么就取消一个。 

 

洼地

洼地(Well)样式的效果和大屏幕展播Jumbotron样式类 似,不同点是well样式有了边框设置,并且默认高度是自适应文本的高度。 

well样式也提供了不同大小的样式(主要是panding和圆角大小),分别是:well-lg和well-sm。使用时,直接和 well一起应用在同一个元素上即可。也可以改造well,让well支持不同颜色的显示 (比如边框和背景色的变化),样式如well-success、well- info一样。

 

主题

在Bootstrap新版——3.x版本中还新增了一个bootstrap- theme.css文件,该文件并没有提供什么新的功能,仅是针对一 些常用的CSS组件进行了增强。

 1）btn按钮样式主题 ：在theme里,与btn相关的样式主要对按钮阴影和背景颜色 进行了增强(或改变)。 

2）缩略图样式主题 ：加强了一下阴影的设置。 

3）下拉菜单样式主题 ：针对li里的a链接进行了两种类似的增强。

4）导航条样式主题：由于导航条有两种——navbar-default和navbar- inverse,所以在增强的时候,分别对这两种样式进行修改。 

5）警告框样式主题 ：统一调整了阴影设置,又对所有风格的边框颜色和背景设置进行了调整 。

6）进度条样式主题： 对进度条的调整都与背景相关,形式和警告框alert类似, 

7）列表组样式主题： 首先是调整了列表组容器的圆角和阴影设置,其次是对当前高亮的列表项的阴影、背景以及边框颜色进行了调整。

8）面板样式主题 ：一个是容器的阴影,一个是每种风 格下的head元素的背景调整。 

9）well样式主题 ：well样式的调整也是背景、边框颜色这几样 。

theme文件不是必须要引用的,如果喜欢这种风格才 引用它;如果要定制自己的风格,则可以引用自己的theme名 称,比如bootstrao-theme-flatui.css。但是一定要注意,该文 件一定要在bootstarp.min.css文件之后才能引用,否则会覆盖默 认的效果。 

 

以上全文参考自《深入理解bootstrap》