2018-04-12 bootstrap

预定义样式风格
按钮的常用
<input type="button" value="首选项" class="btn btn-primary">
btn btn-primary success info warning danger
--->
<input type="button" value="默认样式">
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="成功" class="btn btn-success">
<input type="button" value="一般信息" class="btn btn-info">
<input type="button" value="警告" class="btn btn-warning">
<input type="button" value="危险" class="btn btn-danger">
--->


image.png

背景类的
<p class="bg-primary">首选项</p>
bg-primary success info warning danger
--->
<p>默认段落</p>
<p class="bg-primary">首选项</p>
<p class="bg-success">成功</p>
<p class="bg-info">一般信息</p>
<p class="bg-warning">警告</p>
<p class="bg-danger">危险</p>
--->


image.png

默认文字类的
<span class="text-primary">首选项</span>
text-primary success info warning danger
--->
<span>默认文字</span>
<span class="text-primary">首选项</span>
<span class="text-success">首选项</span>
<span class="text-info">首选项</span>
<span class="text-warning">首选项</span>
<span class="text-danger">首选项</span>
--->


image.png

警告框的
<div class="alert alert-warning">我是警告框</div>
alert-warning danger 也是多种的
--->
<div class="alert alert-warning">我是警告框</div>
<div class="alert alert-danger">我是危险信息</div>
--->


image.png

面板类的
<div class="panel panel-primary">
<div class="panel-heading">
<h4>我是面板的标题</h4>
</div>
<div class="panel-body">
我是面板的主体内容!
</div>
</div>
panel panel-primary success info warning danger


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • bootstrap CSS# 一、容器.container 包裹其他元素div.row 必须放在.conta...
    贞贞姐阅读 4,513评论 0 14
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,515评论 0 66
  • 一、入门准备 二、整体架构 A.整体架构 1.CSS12栅格系统:以规则的网格阵列来指导和规范网页中的版面布已有以...
    ZyBlog阅读 4,822评论 0 1
  • 黑 无力的黑 遮了夜里 烧不尽的烟灰 黑 刺眼的黑 晃出一道 灯光下的荒凉 怎么也躲不掉 带着一片干草 不小心就能...
    十针阅读 1,059评论 0 1
  • 我是一个贪心的人,步入不惑之年,更是。与物,与爱,都贪,但是还好,尚还分得清那些是属于我的,该贪,那些是不属于我的...
    小云的作业阅读 3,068评论 0 3