bootstrap基础学习六篇

bootstrap按钮

类     描述

.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     禁用按钮

1.按钮代码如下：

<!-- 标准的按钮 -->

<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>

2.按钮的大小

下表列出了获得各种大小按钮的 class：

Class     描述

.btn-lg     这会让按钮看起来比较大。

.btn-sm     这会让按钮看起来比较小。

.btn-xs     这会让按钮看起来特别小。

.btn-block     这会创建块级的按钮，会横跨父元素的全部宽度。

3.代码如下：

<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>

4.激活状态：

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

元素     Class

按钮元素     添加 .active class 来显示它是激活的。

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

5.代码如下：

<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>

6.禁用状态：

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素     Class

按钮元素     添加 disabled 属性 到 <button> 按钮。

锚元素     添加 disabled class 到 <a> 按钮。

注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

7.代码如下：

<p>

   <button type="button" class="btn btn-default btn-lg">

      默认按钮

   </button>

   <button type="button" class="btn btn-default btn-lg" disabled="disabled">

      禁用按钮

   </button>

</p>

<p>

   <button type="button" class="btn btn-primary btn-lg ">

      原始按钮

   </button>

   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">

      禁用的原始按钮

   </button>

</p>

<p>

   <a href="#" class="btn btn-default btn-lg" role="button">

      链接

   </a>

   <a href="#" class="btn btn-default btn-lg disabled" role="button">

      禁用链接

   </a>

</p>

<p>

   <a href="#" class="btn btn-primary btn-lg" role="button">

      原始链接

   </a>

   <a href="#" class="btn btn-primary btn-lg disabled" role="button">

      禁用的原始链接

   </a>

</p>

7.按钮标签代码如下：

<a class="btn btn-default" href="#" role="button">链接</a>

<button class="btn btn-default" type="submit">按钮</button>

<input class="btn btn-default" type="button" value="输入">

<input class="btn btn-default" type="submit" value="提交">

8.效果图：

aaarticlea/png;base64,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" alt="" />

链接：http://www.shouce.ren/api/view/a/780

bootstrap基础学习六篇的更多相关文章

bootstrap基础学习二篇
这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...
bootstrap基础学习五篇
bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. < ...
bootstrap基础学习八篇
bootstrap辅助类 a.对于文本颜色以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类描述 .text-muted "text-muted" ...
bootstrap基础学习七篇
bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...
bootstrap基础学习四篇
bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...
bootstrap基础学习三篇
bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...
bootstrap基础学习一篇
官网:http://www.bootcss.com/ 这里,主要讲解bootstrap3.关于他的介绍就不用复述了. 1.示例 <!doctype html> <html lang= ...
bootstrap基础学习十一篇
bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...
bootstrap基础学习十篇
bootstrap字体图标(Glyphicons) a.什么是字体图标字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...

随机推荐

ant design pro （十一）advanced Mock 和联调
一.概述原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
Java注解与自己定义注解处理器
动机近期在看ButterKnife源代码的时候.竟然发现有一个类叫做AbstractProcessor,并且ButterKnife的View绑定不是依靠反射来实现的,而是使用了编译时的注解,自己主动 ...
Linux命令-文件处理命令:less
翻页查看文件命令,区别于more分页查看文件命令 less /etc/services 分页显示services文件注意:可以使用PgUp往上翻页,上箭头往上查看行,PgDn往下翻页(或空格往下翻页 ...
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用结合使用HttpWebReq ...
http协议中各个响应状态200_301_404_500等返回值含义快速一览
一.定义从HTTP的定义可以看出,HTTP协议是互联网上进行数据通信的基础协议,用来交换或传输超文本.超文本是一种结构化的文本,在包含文本的节点之间使用逻辑链接(也叫超链接). 二.概述 HTTP是 ...
mysql拼接字符串和过滤字符的方法
数据 id value 1 aa<p>QL实木颗粒</p> 2 bb<p>QL实木颗粒</p> ...
本地ubuntu下pycharm 如何利用远程开发环境时显示图片
最近使用pycharm远程开发tensorflow,每次在想显示图像时,苦于不知怎么操作,就通过保存后再看结果,使得调试很不方便.今天打算解决这个问题,收获也是很多啊. 我首先参考了这两篇博客: ht ...
Faster RCNN原理分析：Region Proposal Networks详解
博主的论文笔记: https://blog.csdn.net/YZXnuaa/article/details/79221189 很详细! 另外,关于博主的博客很多拓展知识面: 120篇深度学习23篇 ...
温故而知新通过chrome tool 查看是否产生闭包
function foo() { var a = 20 var b = 30 function bar() { debugger; return a + b } return bar; } var b ...
uploadify onSelect
uploadify onSelect [return false]停止选择 $("#fileEleId").uploadify({ 'width': _option.width, ...

bootstrap基础学习六篇

bootstrap基础学习六篇的更多相关文章

随机推荐

热门专题