bootstrap教程整理-组件2/3

一、字体图标

注意:想要使用字体图标,我们之前引用js和css所在文件夹一定要有fonts组件

    

想要使用字体图标,要单独创建一个span标签作为作用域,写类名的时候,要先写glyphicon再写图标名

二、下拉菜单

1.基本用法

写一个.dropdown容器,里面放入触发器和下拉菜单

    
2.弹出方向

通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)。

     
......
3.标题

在下拉菜单中,可以为某一个li标签添加.dropdown-header设置成标题形式

    
4.分割线

在下拉菜单中,可以为某一个li标签添加divider设置成分割线样式

    
     
5.不可用菜单(禁用)

为下拉菜单中的 li 元素添加 .disabled 类,从而禁用相应的菜单项。

    

三、按钮组

通过按钮组容器把一组按钮放在同一行里。与之前所学的按钮插件配合使用

1.基本用法

将类名为.btn的按钮放到按钮组.btn-group

    
2.按钮工具栏

把一组.btn-group组合进一个.btn-toolbar中就可以做成更复杂的组件。

    
3.垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。

    
...
4.嵌套

想要把下拉菜单混合到一系列按钮中,只须分两步:

  • 把下拉菜单直接复制粘贴到按钮组.btn-group
  • 将下拉菜单的.dropdown改为.btn-group
    

如果在下拉菜单外面没有包裹.btn-group,下拉菜单将会错位

5.分裂按钮下拉菜单

我们把下拉菜单放到按钮组中,一个重要的原因就是可以做出分裂式的下拉菜单,只要将上面的稍作修改即可

四、导航

bootstrap 中的导航组件都依赖同一个.nav

    
1.标签页(选项卡标题)

注意 .nav-tabs 类依赖 .nav 基类。

    
2.胶囊式标签页

HTML 标记相同,但使用 .nav-pills 类:

    
3.禁止

对任何导航组件(标签页、胶囊式标签页),都可以添加 .disabled 类,从而实现链接为灰色且没有鼠标悬停效果。

    
4.导航下拉菜单
    

五、导航条

导航外面加一个.navbar

    
1.品牌标志(标题-logo)

在导航条里面的有头部信息,头部信息里面有专门的brand品牌标志

    
2.品牌图标

将导航条内放置品牌标志的地方替换为 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补(padding)和高度(height)

       ...
      
        ![](...)
      
       ...
3.固定在头部

添加 .navbar-fixed-top 类可以让导航条固定在顶部

    
4.固定在底部

添加 .navbar-fixed-bottom 类可以让导航条固定在底部

    
5.静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失

    
5.反色的导航条

过添加 .navbar-inverse 类可以改变导航条的外观

    
6.响应式导航条

要实现一个响应式导航条,需要把导航条包含在.navbar-collapse和.collapse中,并添加一个触发按钮.navbar-toggle .collasped,并加上data-toggle属性绑定响应式功能和data-target属性绑定下面的菜单


六、路径导航(面包屑)

在一个带有层次的导航结构中标明当前页面的位置。

    

七、分页

为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。

1.默认分页
    
2.禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

    
3.翻页

用简单的标记和样式,就能做个上一页和下一页的简单翻页。

    
4.翻页按钮对齐

把链接向两端对齐

    

八、徽章

给链接、导航等元素嵌套.badge> 元素,可以很醒目的展示新的或未读的信息条目。

    
          按钮
          42
    

    

九、缩略图

通过Bootstrap的栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。

1.基础写法

给包括的内容加一个包裹标签,类名为:.thumbnail,周边增加间距。

  
2.自定义写法

可以把任何类型的 HTML 内容,例如标题、段落或按钮,加入缩略图组件内。


    
![](...)

标题

文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容

按钮1 按钮2

164312322

十、警告框

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert 类是必须要设置的,另外bootstrap还提供了有特殊意义的4个类

1.警告框的四种样式
    
...
...
...
...
2.可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

    
Warning! Better check yourself, you're not looking too good.
3.警告框中的连接

.alert-link 工具类,可以为链接设置与当前警告框相符的颜色。

    
...
...
...
...

十一、进度条

1.基本实例

由父元素和子元素两部分组成

2.带有提示标签的进度条

在子元素中写上内容即可

    
60%

当进度条非常小的情况下,很容易将文本挤走,所以,可以给进度条设置min-width属性

    
0%
2%
3.设置颜色

滚动条也可相应的添加四种颜色

4.条纹效果

通过渐变可以为进度条创建条纹效果,IE9 及更低版本不支持

    
5.动画效果

为 .progress-bar-striped 添加 .active 类,使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

    
6.堆叠效果

把多个进度条放入同一个 .progress 中,使它们呈现堆叠的效果。

  

十二、列表

1.基本
    
  • 苹果
  • 西瓜
  • 草莓
  • 桃子
  • 柚子
2.徽章

如果是在列表里面放入徽章,则会自动放到右边

  
  • 14 水果

十三、面板

1.基本

默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。

里面内容需要包括在.panel-body里面。

    
面板内容
2. 标题

标题需要包换在.panel-heading类的标签内。

    
标题内容
面板内容
3.脚注

次要的文本放入 .panel-footer 容器内。无法从情景颜色中继承颜色

    
...
4.情景颜色
    
...
...
...
...
...

你可能感兴趣的:(bootstrap教程整理-组件2/3)