专栏首页李才哥Bootstrap 响应式框架 第四集
原创

Bootstrap 响应式框架 第四集

1、简单组件

1、路径导航

<ul class="breadcrumb">

<li>

<a href="#"></a>

</li>

<li>

<a href="#"></a>

</li>

<li class="active">

<a></a>

</li>

</ul>

2、分页

1、默认分页

<ul class="pagination">

<li>

<a href="#">&laquo;</a>

</li>

<li>

<a href="#">1</a>

</li>

<li>

<a href="#">2</a>

</li>

<li>

<a href="#">&raquo;</a>

</li>

</ul>

2、翻页效果

<ul class="page">

<li>

<a href="#">上一页</a>

</li>

<li>

<a href="#">下一页</a>

</li>

</ul>

3、标签

所有的标签都依赖于 .label

不同颜色的标签:

.label-default

.label-primary

.label-success

.label-dange

.label-info

.label-warning

4、徽章

.badge

5、巨幕

.jumbotron

6、页头

.page-heade

7、水井

.well

8、进度条

外层:.progress

内层:

.progress-ba

配合不同颜色的 类一起使用

.progress-bar-info

.progress-bar-success

.progress-bar-dange

.progress-bar-warning

附加带条纹的类

.progress-bar-striped

附加被激活的效果的类

.active

2、组件 - 按钮组

1、作用

将多个按钮放在一个组中(btn-group)

2、语法

1、基本按钮组

<div class="btn-group">

<button>

<button>

<button>

</div>

2、可以将多个按钮组合并进一个按钮工具栏

将多个 .btn-group 放在一个 .btn-toolbar的元素中

3、按钮组的尺寸

为.btn-group 增加 .btn-group-* 设置尺寸

.btn-group-lg : 超大号按钮组

.btn-group-sm : 小号按钮组

.btn-group-xs : 超小号按钮组

4、两端对齐的按钮组 ???

5、垂直显示的按钮组 ???

3、组件 - 警告框

所有的警告框都依赖于 .alert

不同颜色的警告框,增加以下类即可:

.alert-success

.alert-info

.alert-warning

.alert-dange

1、允许被关闭的警告框

1、警告框元素必须依赖 .alert-dismissible

2、触发器元素增加一个属性

data-dismiss="alert"

4、组件 - 缩略图(thumbnail)

1、注意

1、要配合着栅格布局系统一起使用

2、最好将图片设置为 img-responsive

2、语法

1、基本的缩略图

<a href="#" class="thumbnail">

<img src="">

</a>

2、复杂的缩略图(图片,文字,按钮)

<div class="thumbnail">

<img>

/*文字区域*/

<div class="caption">

<h3>缩略图标题</h3>

<p>文本段落1..</p>

<p>文本段落2..</p>

<p>

<button>

<a>

</p>

</div>

</div>

5、组件 - 媒体对象(media)

1、媒体对象列表

<ul class="media-list">

<!-- 媒体对象1 -->

<li class="media">

<div class="media-left"></div>

<div class="media-body"></div>

</li>

<!-- 媒体对象2 -->

<!-- 媒体对象n -->

</ul>

6、组件 - 列表组(list-group)

ul : class="list-group"

li : class="list-group-item"

7、组件 - 面板

允许呈现出头部、主体、尾部的结构的组件

8、组件 - 导航条

1、基本导航条的实现

1、最外层 由nav并且引用 navbar navbar-default 两个类选择器来组成的

2、nav中必须添加一个 容器(container/container-fluid)

3、允许在 容器中 增加网站的品牌或标识内容

将 .navbar-header 的元素放在 容器中即可

4、.navbar-header 中的 链接/文字/图片 要引用 .navbar-brand 的类选择器

2、导航条中的导航(链接列表)

导航条中的导航依赖于 .nav .navbar-nav 即可

3、导航条中的表单

导航条中的表不适用于bootstrap提供的表单类

需要为 navbar 中的 <form>增加 class :.navbar-form

注意:

navbar-form 默认是没有浮动的,需要自己手动指定浮动效果

通过 navbar-left / navbar-right 处理左或右浮动

4、导航条中的按钮

按钮需要增加 .navbar-btn 来处理按钮在导航条中的位置

5、导航条中的文本

文本需要增加 .navbar-text 来处理文本在导航条中的位置

6、导航条中的浮动方式

通过 navbar-left 实现元素左浮动

通过 navbar-right实现元素右浮动

7、实现导航条的固定

为导航条元素增加以下类,来实现固定效果

固定顶端:.navbar-fixed-top

固定底端:.navbar-fixed-bottom

注意:

9、JS 插件 - Plugins

插件 - 提供了一组操作的行为

每种行为基本上都有两种的调用方式:

1、data-*

ex:

data-toggle="dropdown"

data-toggle="tab"

data-dismiss="alert"

2、JS编程方式

通过代码来调用行为

<script>

$("选择器"):用于获取指定选择器所对应的元素

$("#nav") : 获取页面中ID为nav的元素

$(".container") : 获取页面中class为container的元素

</script>

10、JS插件 - 工具提示(tooltip)

为元素添加以下内容:

data-toggle="tooltip"/*定义鼠标移入的行为*/

title="提示的文本"

data-placement="top/left/right/bottom"

必须配合 JS 代码一起完成

$("选择器").tooltip();

11、JS插件 - 弹出框(popover)

为元素添加以下内容:

1、data-toggle="popover"

2、data-placement="top/right/bottom/left"

3、title="弹出框标题(可选)"

4、data-content="弹出框中的内容"

必须配合的JS代码

$("选择器").popover();

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 常考基础知识点

    在 beforeCreate 钩子函数调用的时候,是获取不到 props 或者 data 中的数据的,因为这些数据的初始化都在 initState 中。

    李才哥
  • JS数组去重的几种常见方法

    李才哥
  • css中换行的特殊用法

    两个属性都同样是让文字换行,但存在着细微的区别,大部分时候刚接触到这两个属性时会无法区别两个的区别

    李才哥
  • bootstrap的span4 class无效了么?『神兽必读』

    span4 class is not working with twitter bootstrap 作为一个从事web开发的新新人类,我很高兴我使用上了Twi...

    用户3579639
  • 封装数组之改进为泛型数组

    前言:通过上一节我们对我们需要封装的数组,进行了基本的增删改查的封装,但只局限于int类型的操作,为了能提供多种类型数组的操作,我们可以将其进一步封装为泛型数组...

    wfaceboss
  • 无人机质量滑坡,中国智造为何频现一锤子买卖?

    从人们手腕上的智能手环到共享单车上的智能锁,从农田上空撒种子、喷农药的无人机到餐厅中“萌萌哒”的机器人服务员,随着大众创业、万众创新的兴起和中国经济结构转型的深...

    机器人网
  • ggplot2|详解八大基本绘图要素

    ggplot2是由Hadley Wickham创建的一个十分强大的可视化R包。按照ggplot2的绘图理念,Plot(图)= data(数据集)+ Aesthe...

    西游东行
  • 大咖|第四范式蒋仁皓:什么才是构建企业AI的关键要素

    大数据文摘
  • drf框架中所有视图及用法

    from rest_framework import views, generics, mixins, viewsets

    小小咸鱼YwY
  • Laravel5.8学习日常之分页

    在平常的代码撰写中,分页是一个比较头疼的一件事,总结一下,现在分页可以分为两种分页大类,分别是后端分页及前端分页。

    Debug客栈

扫码关注云+社区

领取腾讯云代金券