前端库Bootstrap框架：「08]使用 btn-danger 提示危险操作

路条编程 2021-06-10

2575

Bootstrap 是一个前端框架，用于设计响应式 web 页面和 web 应用程序。它采用移动优先的方法来开发 web。Bootstrap 包括预构建的 CSS 样式和类，以及一些 JavaScript 功能。Bootstrap 采用响应式 12 列网格布局，并具有以下设计组件模板：按钮、图片、表格、表单、导航，本专题介绍在 web 项目中使用 Bootstrap 框架的一些方法。

使用 btn-danger 提示危险操作

Bootstrap 有着丰富的预定义按钮颜色。红色 btn-danger
class 用来提醒用户此行为具有破坏性，比如删除一张猫的图片。

创建一个包含文本 "删除" 的按钮并为它设置 class 为 btn-danger
。

记住：删除按钮仍然需要 btn
和 btn-block
class。

完整代码如下所示:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid">


<h2 class="text-center red-text">宠物猫应用</h2>


<p>点击此处<a href="#">猫图片</a>.</p>


<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="一只可爱的橙色猫躺在它的背上"></a>


<img class="img-responsive" src="https://bit.ly/fcc-running-cats">
 <button class="btn btn-primary btn-block">喜欢</button>
 <button class="btn btn-info btn-block">提示信息</button>
  <button class="btn btn-block btn-danger">删除</button>
<p>宠物猫爱好:</p>
<ul>
  <li>吃鱼</li>
  <li>嬉戏</li>
  <li>吃猫粮</li>
</ul>
<p>最讨厌的三件事:</p>
<ol>
  <li>跳蚤</li>
  <li>打雷</li>
  <li>狗</li>
</ol>
<form action="http://www.icoderoad.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> 户内</label>
  <label><input type="radio" name="indoor-outdoor"> 户外</label>
  <label><input type="checkbox" name="personality"> 爱</label>
  <label><input type="checkbox" name="personality"> 懒惰</label>
  <label><input type="checkbox" name="personality"> 疯狂</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">提交</button>
</form>
</div>

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。

前端

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

前端库Bootstrap框架：「08]使用 btn-danger 提示危险操作

评论