BootStrap笔记18

最新推荐文章于 2024-06-15 23:15:36 发布
最新推荐文章于 2024-06-15 23:15:36 发布
阅读量121 收藏
点赞数
分类专栏： JavaWeb 前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/senmu_/article/details/109965526
版权

警告

1.警告框
.alert-success
.alert-info
.alert-warning
.alert-danger

在这里插入图片描述

<div class="alert alert-success">操作成功</div>
<div class="alert alert-info">信息提示</div>
<div class="alert alert-warning">警告提示</div>
<div class="alert alert-danger">危险提示</div>

2.可关闭的警告框
.alert-dismissable

在这里插入图片描述

<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	成功！很好地完成了提交。
</div>

3.警告框中的链接
.alert-link 提供带有匹配颜色的链接

在这里插入图片描述

<div class="alert alert-success">
  <span>大减价！！！</span><a href="#" class="alert-link">点击购买</a>
</div>
-森木-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 笔记
qq_42316056的博客
08-23 288
Bootstrap 小白笔记
Bootstrap警告
weixin_34234823的博客
06-28 119
警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 警告（Alerts） 步骤： 1、创建一个 &lt;div&gt; 2、并向其加入一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之中的一个， 来加入一...
Bootstrap笔记大全
认真学习前端的博客
03-07 1508
Bootstrap笔记大全
Bootstrap笔记
是木子啦~
08-06 96
概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处： 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 响应式布局。 同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 在项目中将这三个文件.
Bootstrap学习笔记
m0_74530944的博客
04-23 805
在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！大家看完有什么不懂的可以在下方留言讨论也可以关注。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！也可以关注。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
BootStrap笔记-分页
IT1995的博客
01-17 977
程序运行截图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--
BootStrap截图笔记
最新发布
m0_57002446的博客
06-15 62
container用于页面居中。响应式布局可查看文档。
BootStrap笔记-导航
IT1995的博客
01-24 787
运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--
BootStrap 基础笔记
qq_43645678的博客
08-22 2347
Bootstrap 基础笔记
bootstrap笔记
k00c00l的博客
03-01 143
Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- （1）基本布局格式：bootstrap把网页分成12栅格，排版时以每一单元作为度量单位; 例：.container>.row>.col-sm-1 （2）关键字段 1、col是列； 2、row是行； 3、xs是maxsmall的简写：极小， sm是small简写：小， md是medium简写...
李炎恢Bootstrap讲义笔记
03-06
李炎恢老师的Bootstrap讲义笔记，结合2017年的最新技术动态，为学习者提供了全面且深入的理解和实践指导。 一、Bootstrap简介 Bootstrap是目前最流行、使用最广泛的前端开发框架之一，它包含了一系列预先设计的CSS...
bootstrap笔记总结
12-29
Bootstrap 笔记总结 Bootstrap 是一个流行的前端框架，用于快速构建响应式的 web 应用程序。下面是 Bootstrap 相关的知识点总结： Base CSS * Bootstrap 提供了一个基本的 CSS 框架，使得开发者可以快速构建响应...
HTML引用公共页面（header.html和footer.html）
senmu_的博客
11-02 3475
HTML引用公共页面（header.html和footer.html） 我们做项目时，会发现许多页面有相同的部分，重复写会花费大量不必要的时间，复制的话修改不方便。只要我们把公共部分提取出来，单独写，在需要用的时候引入就可以。 <body> <div class="headerpage"></div> <div>...中间部分...</div> <div class="footerpage"></div> <scrip
Javascript用户名验证
senmu_的博客
11-01 1448
Javascript用户名验证 核心：正则表达式验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS登录验证</title> </head> <body> <script> function onclickFun() { var patt = /^\w{5,12}$
BootStrap笔记——可切换导航栏
senmu_的博客
11-28 933
可切换导航栏 ul标签与nav标签（及其相关标签）结合使用 <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#1-1" data-toggle="tab">导航栏名称1-1</a></li> <li><a href="#1-2" data-toggle="tab">导航栏名称1-2</a></li>
BootStrap4笔记——滚动监听
senmu_的博客
12-03 411
滚动监听 自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。 1.创建滚动监听 <!-- 可滚动区域 --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --> <nav clas
BootStrap笔记——附加导航
senmu_的博客
12-02 387
附加导航 锁定在某个位置，不会随着页面其他部分一起滚动 <style> /* Custom Styles */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.na

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值