前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap 响应式框架 第四集

Bootstrap 响应式框架 第四集

原创
作者头像
李才哥
修改2020-08-17 10:21:08
1.4K0
修改2020-08-17 10:21:08
举报
文章被收录于专栏:李才哥

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();

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档