位置: 编程技术 - 正文

浅析Bootstrap缩略图组件与警示框组件(bootstrap内容)

编辑:rootadmin

推荐整理分享浅析Bootstrap缩略图组件与警示框组件(bootstrap内容),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap tabs,bootstrap 缩略图,bootstrap首行缩进,bootstrapstandby,bootstrap progress,bootstrap 缩略图,bootstrapstandby,bootstrap缩放变形,内容如对您有帮助,希望把文章链接给更多的朋友!

Bootstrap简介

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

缩略图组件

缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题、描述内容、按钮等信息。

bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件:

LESS : tbumbnails.less

SASS : _tbumbnails.scss

实现原理:

布局的实现主要依靠于bootstrap框架的网格系统,下面是缩略图对应的样式

来看一个例子:

效果如下:

可以用火狐响应式设计视图查看

在仅有缩略图的基础上,添加一个类名为.caption的div容器,在这个容器中放置其他内容,如:标题,文本描述,按钮等

警示框组件

浅析Bootstrap缩略图组件与警示框组件(bootstrap内容)

bootstrap框架通过.alert样式来实现警示框效果,在默认情况下,bootstrap提供了四种不同的警示框效果:

1、成功警示框:提示用户操作成功,在.alert的基础上追加.alert-success样式;

2、信息警告框:给用户提供提示信息,在.alert的基础上追加.alert-info样式;

3、警告警示框:提供警告信息,在.alert的基础上追加.alert-warning样式;

4、错误警示框:提示用户操作错误,在.alert的基础上追加.alert-danger样式;

其中,.alert样式主要设置了警示框的背景色、边框,圆角,文字颜色,此外还对h4、p、ul及.alert-link做了样式上的处理,下面是css源码:

例如:

可关闭的警示框

1、在默认的警示框的容器上追加一个.alert-dismissable类名

2、在button标签中添加.close,实现警告框的关闭按钮

3、确保关闭按钮元素上设置了自定义属性data-dismiss=”alert“(关闭警示框需要通过js来检测该属性,从而控制警示框的关闭)

例子:

警示框的链接

有时候需要在警示框中加入链接,告诉用户跳转到新的页面,bootstrap框架中对警示框的链接做了高亮处理。给警告框加的链接添加一个为.alert-link的类名,下面是alert-link的css样式

例子:

关于本文给大家介绍的Bootstrap缩略图组件与警示框组件的相关知识就给大家介绍这么多,希望对大家有所帮助!

JavaScript函数柯里化详解 什么是柯里化柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是

浅析BootStrap模态框的使用(经典) BootStrap模态框简单概述BootstrapModals(模态框)是使用定制的Jquery插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可

JS组件Bootstrap导航条使用方法详解 导航条是在您的应用或网站中作为导航标头的响应式元组件。1、默认的导航条导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增

标签: bootstrap内容

本文链接地址:https://www.jiuchutong.com/biancheng/369904.html 转载请保留说明!

上一篇:javascript中利用柯里化函数实现bind方法(js如何使用)

下一篇:JavaScript函数柯里化详解(js函数详解)

  • 资金账簿印花税减半政策
  • 注册税务师考试科目
  • 税收工资什么意思
  • 企业进口葡萄酒也要缴纳消费税吗
  • 企业土地使用税征收标准
  • 劳务报酬收入是否含税
  • 出差的招待费怎么报销
  • 收到固定资产发票抵扣进项税
  • 外企当年利润能赚多少
  • 发票一定要填数量吗
  • 结转无形资产账面价值
  • 上年减值准备收回如何做账务处理呢?
  • 企业生产设备发生的日常维修费用
  • 公司固定资产丢失谁负责
  • 设备安装和设备出售的税率一样吗
  • 哪些营业外支出要调增
  • 从成因解析如何把控出口退税的执法风险
  • 应收账款的周转率怎么算
  • 开业好不好
  • 1697508669
  • 实收资本减值会计处理
  • 租车公司的车能租吗
  • 连接另外一个设备
  • 文件夹删除需要管理员权限怎么弄
  • 公寓收费标准
  • 结转本年利润的分录怎么写
  • 无限极分类mysql
  • 领用材料已抵扣进项税
  • 事业单位包含哪些
  • vue ui怎么用
  • php连接数据表
  • javascript基础语法
  • php多进程处理大数据
  • php十进制转二进制算法
  • 材料成本差异的会计分录
  • 注册资金抽回
  • 残保金怎么计算公式
  • 深度学习分析NASA电池数据(1 数据读取)
  • php分页思路
  • html中写php
  • code .命令
  • 当月开出的销项票一定要当月抵扣吗
  • 属于长期险种的是
  • 租赁公司一般都有什么税
  • PostgreSQL教程(三):表的继承和分区表详解
  • 所得税预缴申报表资产总额怎么填
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 签发转账支票需要的单据
  • 行政事业单位赞助支出会计核算办法
  • 业务招待费的进项票可以抵扣吗
  • 营改增对企业有什么弊端
  • 招待费进项税额可以抵扣吗
  • 收到货物抵账的会计分录
  • 包装物范围
  • 金税盘缴销发票
  • 私人贴现利息如何交税
  • 一般户和基本户怎么使用最好
  • 消费税的科目设置在哪里
  • windowsxp不能启动怎么修复
  • 注册表禁止windows自动更新
  • ubuntu 安装zsh
  • 电脑重装系统win8
  • win10无法回退到以前的版本怎么办
  • win10的显示
  • chrome浏览记录保存多久
  • shell printf 变量
  • 批处理书
  • web标准包含哪些
  • node.js中的http.response.end方法使用说明
  • jQuery position() 函数详解以及jQuery中position函数的应用
  • unity getint
  • javascript SpiderMonkey中的函数序列化如何进行
  • nodejs 写文件
  • 关于事件的报告范文
  • axios原理和实现
  • ubuntu20.04 python
  • 率土之滨怎么提高建设值上限
  • 怎么屏蔽微信群消息,但是不退出此群
  • 厦门市税务局电话
  • 科技公司小规模纳税人与一般纳税人区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设