Bootstrap学习笔记之css组件(3)

Bootstrap学习笔记之css组件(3)

今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在之前的文章中阅读。

一、导航组件

自己做了个导航，目前只有一级菜单，下一篇文章中，将给出二级菜单，涉及到js的插件，所以这里不在描述。

效果如下：

导航类需要注意以下几点：

1：导航组件依赖于nav类。（即使用其它类时，都必须写上这个类）

2：确保导航组件的可访问性（添加role属性）

3：涉及到的类包括nav-tabs ,nav-pills(使导航呈现胶囊状)，nav-stacked(使水平导航变为竖直导航)，nav-justified(实现导航均等宽度排列)

4：对于disabled类，添加在导航页中的链接时（包括标签页和导航页），只是使其表面上被禁用（颜色变灰，鼠标形状改变），实际功能依然还存在。

5：带下拉菜单的导航使用。

我们来看下列子：可自行贴码测试，不再截图。

再来看下带下拉菜单的导航情况：

aria-expanded="false">

Dropdown

aria-expanded="false">

Dropdown

其实对于使用下拉菜单类dropdown，基本格式都是像上面这样，或者你把链接a变为button等之类，灵活运用即可。

二、导航条组件

注意点：

1：导航条即把组件全部横向排列放置，包裹组件，类似于横向导航的形式

2：确保可访问性。使用

3：涉及到导航条的类包括：navbar-inverse（实现背景颜色为黑色和文字白色效果）,navbar-fixed-top|navbar-fixed-bottom(固定导航条在顶部和底部)

navbar-left|navbar-right(通常给最后一个元素加navbar-right),navbar-text,navbar-link(设置连接颜色),navbar-btn(对于不包含在form表单里的按钮，可

使用此类，达到垂直居中的效果)，navbar-form(达到垂直对齐效果)，navber-brand(设置品牌图标)，navbar-collapse(折叠)

我们来看下navbar-collapse折叠的效果，代码如下：

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Toggle navigation

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Toggle navigation

brand

aria-haspopup="true" aria-expanded="false">Dropdown

aria-haspopup="true" aria-expanded="false">Dropdown

Submit

aria-haspopup="true" aria-expanded="false">Dropdown

aria-haspopup="true" aria-expanded="false">Dropdown

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Toggle navigation

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Toggle navigation

Brand

实现效果如下：

即当我浏览器屏幕缩小时，原先的组件都将变为跟brand一行的  右边的折叠行（三横线）。点击该三横按钮，则组件将显示出来。

三、分页组件

注意点：

1：使用类pagination(加pagination-lg类可使其变大)

2：实现翻页对齐与实现翻页两端对齐（前和后分别位于两端）。

贴码如下：

«

如果实现分页变大直接加上

实现翻页效果如下：主要用到pager类

上面两个的效果如下：

四、徽章

作用：将信息以醒目的数字呈现出来。

Inbox42

Message4

效果如下：

添加此类badge类，也可配合导航等一起使用。

五、缩略图组件

配合栅格系统和类thumbnail来一起使用。贴码如下：可自行测试

Button

Button

Button

六、可关闭的警告框

使用类：alert-dismissible和一个button 贴码如下：

× --添加aria-hidden属性

warningbetter check yourself,you are not looking too good.

关于情景色，可自行替换。不再描述。设置alert-link可设置与当前警告框相符的颜色。

七、进度条

使用类:progress和实现动画的进度条

style="width:60%;">

60%

aria-valuemax="100" style="width:80%;">80%

style="min-width:2em;">2%

实现动画效果的进度条，条纹的进度条使用progress-bar-striped,实现动画效果加 active即可。贴码如下：不再截图

aria-valuemin="0" aria-valuemax="100" style="width:100%">

40% complete100%

也可结合情景色，改变进度条条纹的颜色。

八、列表组，输入组组件

先来看列表组，主要用到list-group类，其次列表项目用list-group-item来写。贴码如下：

2222

33333

44444

55555

1111

2222

3333

4444

11111

22222

来看看输入组，使用input-group类，将组件包裹在一起使用。贴码如下：

Go

九、响应式特性的嵌入内容

理解一下什么意思，什么叫嵌入内容？如何嵌入呢？又如何响应呢？

嵌入：即利用

响应：根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 内容 的尺寸，能够在各种设备上缩放。

如果希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。

贴码如下：

我们来看看embed-responsive-16by9和embed-responsive-4by3分别代表什么意思。

我们来看一下调式控制台：

.embed-responsive-4by3 { ---4代表水平，3代表竖向，即一个缩放比例，即为4:3的比例缩放

padding-bottom: 75%;

}

..embed-responsive-16by9 {

padding-bottom: 56.25%;

}

保持纵横比，width按100%算的话，则为100%  *  3/4=75%，此时通过设置它的padding-botom来设置它的纵横比。当你缩放浏览器时，始

终保持该缩放比例进行缩放。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。