资讯专栏INFORMATION COLUMN

甲爪联盟讲解:网站中常见到的提示框设计

DataPipeline / 537人阅读

摘要:提示框用于给客户提示输出消息,通常用于信息反馈。中提供了一组灵活的提示框机制。中的提示框分为四种。,警告提示框,呈现的背景边框文本都是浅黄色。上面的代码提示框是包含在网格系统的列中的,提示框的宽度默认占据容器的。在提示框上添加样式类。

提示框用于给客户提示输出消息,通常用于信息反馈。Bootstrap中提供了一组灵活的提示框机制。在以往的网页制作过程中我们经常使用alert来提示输出消息,但是这样并不是太友好,而且界面也不是很漂亮,Bootstrap改善了这一点。
Bootstrap中的提示框分为四种。
class="alert-success",成功提示框:告诉用户操作成功,呈现的背景、边框和文本都绿色。
class="alert-info",信息提示框:呈现的背景、边框和文本都是浅蓝色。
class="alert-warning",警告提示框,呈现的背景、边框、文本都是浅黄色。
class="alert-danger",错误提示框:呈现的背景、边框和文本都是浅红色。
这与前面章节讲到的按钮(button)中的几种主题色基本类似,使用方式也差不多。以上四种样式的使用都不是基于class="alert",代码如下:

上述代码定义了四种不同的提示框,这是Bootstrap中提示框的最基本的用法,页面运行效果如图所示。上面的代码提示框是包含在网格系统的列中的,提示框的宽度默认占据容器的100%。

上面的提示框没有任何功能作用,我们可以在提示框上添加一个按钮用于关闭提示框,这个在Bootstrap中也是支持的。弹出框的关闭是依赖js插件的,这个会在后续的章节中讲解。要想实现提示框的关闭功能,只需以下几个步骤即可,代码如下:
在提示框class="alert"中添加一个按钮。
在提示框class="alert"上添加"alert-dismissable"样式类。
在新增按钮上添加样式class="close",用于显示关闭图标。
在新增按钮上新增属性data-dismiss="alert“。

上述代码中定义了两个提示框,其中第一个提示框中添加了“关闭”按钮,当我们单击“关闭”按钮时提示框会消失。其中“×”;是显示一个“(”型符号,页面运行效果如图所示。

我们可以在提示框中加入一个链接用于提示跳转到另外一个页面,并在Bootstrap框架中对提示框里的链接样式做一个高亮显示处理,为不同类型的提示框内的链接进行加粗处理,并且使颜色相应加深,代码如下:

代码中定义了两个提示框,分别添加了“帮助”链接,运行效果如图8-14所示,链接文本内容高亮显示。

本文由甲爪cpa广告联盟整理编辑!http://www.jiazhua.com转载请注明!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/22591.html

相关文章

  • 漂浮广告是什么?漂浮广告如何设置

    摘要:首页和各版块帖子页面都可以是独立的广告位。可以自动适应屏幕分辨率,,不被任何网页元素遮挡,同时可以支持多个图片漂浮。 在上一篇文章中甲爪联盟有简短的提到了漂浮广告!漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多,并且从效果来看漂浮广告也是非常不错的!但是个可能个别的站长对漂浮广告了解不够深,或者不知道怎么设置漂浮广告!所以甲爪联盟就对漂浮广告是什么?漂浮广告如何设置做出详细...

    xiaolinbang 评论0 收藏0
  • 漂浮广告是什么?漂浮广告如何设置

    摘要:首页和各版块帖子页面都可以是独立的广告位。可以自动适应屏幕分辨率,,不被任何网页元素遮挡,同时可以支持多个图片漂浮。 在上一篇文章中甲爪联盟有简短的提到了漂浮广告!漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多,并且从效果来看漂浮广告也是非常不错的!但是个可能个别的站长对漂浮广告了解不够深,或者不知道怎么设置漂浮广告!所以甲爪联盟就对漂浮广告是什么?漂浮广告如何设置做出详细...

    xinhaip 评论0 收藏0
  • 矩形广告是什么?矩形广告如何设置?

    摘要:如图一就是一个矩形广告。图一矩形广告怎么设置如果你认为矩形广告是一个不错的广告展现形式,你可以把广告联盟代码拿过来后进行一下三步的操作第一找到你的文章内容表示的代码,比如的文章是利用这个调用的。 导读:(网站的广告展现形式多种多样,不同的广告展现形式带来的转化效果也不一样,而矩形广告是广告样式中转化率比较高一点的展现方式,而什么是矩形广告呢?站主在拿到广告联盟代码后怎么设置矩形广告?甲...

    ZoomQuiet 评论0 收藏0
  • 网站渗透DVWA之存储型XSS

    摘要:使自己脚本在网站运行,造成一些列的危险后果。之前说的反射型和存储型的主要区别在于,存储型的执行脚本会存储在数据库,长期有效。而只是对信息做了验证,并不能阻止的漏洞。机制和昨天说的反射型一模一样。 本文由甲爪cpa联盟(www.jiazhua.com)整理编辑!转载请注明!环境是PHPWAMP,firefox(火狐没有xss过滤器)。环境和dvwa如果下载不方便可以评论留邮箱,看到会分享...

    TANKING 评论0 收藏0
  • 网站搭建之PHP环境配置!

    摘要:不知道是不是今日头条进行了系统升级,标题居然可以写这么长一串文字对于一个想在阿里云服务器上搭建网站的小白解决环境配置成了首要问题,手把手教会环境配置不知道有没有和我一样,同在网站建设方面怀揣着一个小目标的同路人。 不知道是不是今日头条进行了系统升级,标题居然可以写这么长一串文字:对于一个想在阿里云ECS服务器上搭建网站的小白?解决环境配置成了首要问题,手把手教会PHP环境配置! 不知道...

    elisa.yang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<