xml地图|网站地图|网站标签 [设为首页] [加入收藏]

皇家赌场Bootstrap <基础七>按钮

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:185 发布时间:2019-06-26
摘要:其它带有 class  .btn  的因素都会接二连三圆角白灰开关的暗中认可外观。可是 Bootstrap 提供了有的增选来定义按键的体制,具体如下表所示: 以下样式可用于a, button, 或 input 成分上:

其它带有 class .btn 的因素都会接二连三圆角白灰开关的暗中认可外观。可是 Bootstrap 提供了有的增选来定义按键的体制,具体如下表所示:

以下样式可用于<a>, <button>, 或 <input> 成分上:

描述  
.btn 为按钮添加基本样式  
.btn-default 默认/标准按钮  
.btn-primary 原始按钮样式(未被操作)  
.btn-success 表示成功的动作  
.btn-info 该样式可用于要弹出信息的按钮  
.btn-warning 表示需要谨慎操作的按钮  
.btn-danger 表示一个危险动作的按钮操作  
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)  
.btn-lg 制作一个大按钮  
.btn-sm 制作一个小按钮  
.btn-xs 制作一个超小按钮  
.btn-block 块级按钮(拉伸至父元素100%的宽度)  
.active 按钮被点击  
.disabled 禁用按钮  

上边包车型地铁实例演示了上边装有的按键 class:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮选项</title>     <link rel="stylesheet"  >     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312I53-0.jpg"></script>     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312J17-1.jpg"></script>  </head>  <body>    <!-- 标准的按钮 -->  <button type="button" >默认按钮</button>    <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->  <button type="button" >原始按钮</button>    <!-- 表示一个成功的或积极的动作 -->  <button type="button" >成功按钮</button>    <!-- 信息警告消息的上下文按钮 -->  <button type="button" >信息按钮</button>    <!-- 表示应谨慎采取的动作 -->  <button type="button" >警告按钮</button>    <!-- 表示一个危险的或潜在的负面动作 -->  <button type="button" >危险按钮</button>    <!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->  <button type="button" >链接按钮</button>    </body>  </html>

结果如下所示:

皇家赌场 1

Bootstrap 按钮

本章将因而实例疏解怎样使用 Bootstrap 按键。任何带有 class .btn 的因素都会持续圆角石绿按键的暗中同意外观。但是 Bootstrap 提供了部分挑选来定义开关的体制,具体如下表所示:

以下样式可用于<a>, <button>, 或 <input> 元素上:

 

描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

 

 

 

 

 

 

 

 

 

 

 

 

 

上边包车型客车实例演示了上边装有的开关 class:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮选项</title>     <link rel="stylesheet"  >     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312I53-0.jpg"></script>     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312J17-1.jpg"></script>  </head>  <body>    <!-- 标准的按钮 -->  <button type="button" class="btn btn-default">默认按钮</button>    <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->  <button type="button" class="btn btn-primary">原始按钮</button>    <!-- 表示一个成功的或积极的动作 -->  <button type="button" class="btn btn-success">成功按钮</button>    <!-- 信息警告消息的上下文按钮 -->  <button type="button" class="btn btn-info">信息按钮</button>    <!-- 表示应谨慎采取的动作 -->  <button type="button" class="btn btn-warning">警告按钮</button>    <!-- 表示一个危险的或潜在的负面动作 -->  <button type="button" class="btn btn-danger">危险按钮</button>    <!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->  <button type="button" class="btn btn-link">链接按钮</button>    </body>  </html>

结果如下所示:

皇家赌场 2

 

本章将经超过实际例解说怎么着行使 Bootstrap 开关。任何带有 class .btn 的因素都会三回九转圆角中湖蓝开关的默许外观。可是 Bootstrap 提供了一部分采取来定义按键的体制,具体如下表所示:

按键大小

下表列出了收获各类大小开关的 class:

Class 描述
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。

上边包车型大巴实例演示了地方装有的开关 class:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮大小</title>     <link rel="stylesheet"  >     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312I53-0.jpg"></script>     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312J17-1.jpg"></script>  </head>  <body>    <p>     <button type="button" >        大的原始按钮     </button>     <button type="button" >        大的按钮     </button>  </p>  <p>     <button type="button" >        默认大小的原始按钮     </button>     <button type="button" >        默认大小的按钮     </button>  </p>  <p>     <button type="button" >        小的原始按钮     </button>     <button type="button" >        小的按钮     </button>  </p>  <p>     <button type="button" >        特别小的原始按钮     </button>     <button type="button" >        特别小的按钮     </button>  </p>  <p>     <button type="button" >        块级的原始按钮     </button>     <button type="button" >        块级的按钮     </button>  </p>    </body>  </html>

结果如下所示:

皇家赌场 3

开关大小

下表列出了获取各样大小开关的 class:

Class 描述
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。

 

 

 

 

 

上边包车型大巴实例演示了下边装有的开关 class:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮大小</title>     <link rel="stylesheet"  >     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312I53-0.jpg"></script>     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312J17-1.jpg"></script>  </head>  <body>    <p>     <button type="button" class="btn btn-primary btn-lg">        大的原始按钮     </button>     <button type="button" class="btn btn-default btn-lg">        大的按钮     </button>  </p>  <p>     <button type="button" class="btn btn-primary">        默认大小的原始按钮     </button>     <button type="button" class="btn btn-default">        默认大小的按钮     </button>  </p>  <p>     <button type="button" class="btn btn-primary btn-sm">        小的原始按钮     </button>     <button type="button" class="btn btn-default btn-sm">        小的按钮     </button>  </p>  <p>     <button type="button" class="btn btn-primary btn-xs">        特别小的原始按钮     </button>     <button type="button" class="btn btn-default btn-xs">        特别小的按钮     </button>  </p>  <p>     <button type="button" class="btn btn-primary btn-lg btn-block">        块级的原始按钮     </button>     <button type="button" class="btn btn-default btn-lg btn-block">        块级的按钮     </button>  </p>    </body>  </html>

结果如下所示:

皇家赌场 4

 

以下样式可用于<a>, <button>, 或 <input> 成分上:

开关状态

Bootstrap 提供了激活、禁止使用等按键状态的 class,上面将举办详细讲明。

按键状态

Bootstrap 提供了激活、禁止使用等开关状态的 class,上边将开始展览详尽讲明。

皇家赌场 5

激活状态

开关在激活时将表现为被按压的外观(深色的背景、深色的边框、阴影)。

下表列出了让按键成分和锚成分呈激活状态的 class:

元素 Class
按钮元素 添加 .active class 来显示它是激活的。
锚元素 添加 .active class 到 <a> 按钮来显示它是激活的。

上边包车型的士实例演示了那点:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮激活状态</title>     <link rel="stylesheet"  >     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312I53-0.jpg"></script>     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312J17-1.jpg"></script>  </head>  <body>    <p>     <button type="button" >        默认按钮     </button>     <button type="button" >        激活按钮     </button>  </p>  <p>     <button type="button" >        原始按钮     </button>     <button type="button" >        激活的原始按钮     </button>  </p>    </body>  </html>

结果如下所示:

皇家赌场 6

激活状态

按键在激活时将表现为被按压的外观(深色的背景、深色的边框、阴影)。

下表列出了让按键成分和锚成分呈激活状态的 class:

元素 Class
按钮元素 添加 .active class 来显示它是激活的。
锚元素 添加 .active class 到 <a> 按钮来显示它是激活的。

 

 

 

 

上边包车型大巴实例演示了这一点:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮激活状态</title>     <link rel="stylesheet"  >     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312I53-0.jpg"></script>     <script src="http://www.ccidsi.com/uploads/allimg/190626/1Z312J17-1.jpg"></script>  </head>  <body>    <p>     <button type="button" class="btn btn-default btn-lg ">        默认按钮     </button>     <button type="button" class="btn btn-default btn-lg active">        激活按钮     </button>  </p>  <p>     <button type="button" class="btn btn-primary btn-lg ">        原始按钮     </button>     <button type="button" class="btn btn-primary btn-lg active">        激活的原始按钮     </button>  </p>    </body>  </html>

结果如下所示:

皇家赌场 7

下边包车型客车实例演示了上边装有的开关 class:

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:皇家赌场Bootstrap &lt;基础七&gt;按钮

关键词: 68399皇家赌场 bootstrap 按钮

上一篇:Nginx编译安装PHP,linux环境搭建lnmp环境

下一篇:没有了

最火资讯