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,iVBORw0KGgoAAAANSUhEUgAAAU4AAABoCAIAAAARs46hAAAR/ElEQVR4nO2d+1dTZ7rH539wdXWc1XXWmXb1lGrk4gZFCCEJioDcQy+2HlfX/NCZ0U5tLWed1l6moqC1iwbFWi/ckXAzVkDbohAgkAAqCvYYQqAS7pALBBKSBoPP+SEQNuxt2W3OKZvZz2d9f0jevO/7PBA+7J1tJH8ABEE4wB/WugEEQX4PUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTjBGqtus9nUanV1dbWcNdy4caO1tdVms1G77TH27CvZJ8oWCaQCliTibMT+0v09xh5qt07DjxNF/OGsjUOZG1iSkdPPTRSHOw0/Uru1ajRt8TF1/rxang9LUr/Vtz0xzqrR/N//3K8Fa6m61Wqtqanp7Ow0GAwzrMFgMHR1dVVXV09PT5O7vT18W5QtSilNOVh3MFWZypIcrDv4SukrwjPCFn0LudufB5uHszYaCoMtNftmav/Gklhq9hkKdwxL/+h4VEfudlKtrvPn3YkU6/6yv/+dv7Ekur/svxu185bf5snGht9Bh/9v1kz1J0+eqFSqzs5Oi8UyxTIsFktnZ6dKpZqfn/d0G58fL5FJ/nrrr/u/3//md2+yJPu/3//2rbclMkl8fjy52/FLvoaC7dPVr1vk8ZYre9gSefx09euGgu3jl3zJ3aqE/DuR4t79b/SkJGqT4liSnpTE3v/ceydSrBLyPd2uX9ZMdZfLVV1dPT4+PslKxsfHr1+/7nQ6Pd2Kzojeuv7WGzfeYGHeuv6WOFtM7nZY+sepK/GWyhgWZupK/PDpP5G7veW3WfNqcndiLAujeTW5zp/n6Xb9smaqP378WC6Xm1mMXC53OByebgVSwb4b+/Ze38vC7LuxTyAVkLsdytwwVblnqiKKjancM5S5gdxtLc+nOzlek7CHhelOjq/l+Xi6Xb+smepzc3NyudzEYuRyud1u93QrkAper3mdtRFIBeRuhzI3TJVHsjZDmRvI3dbyfDTxMaxNLc/H0+36ZY1VN7IYuVw+Ozvr6VYgFbxW/RprI5AKyN0OZW6YKt/J2gxlbiB3W8vzeRgXzdrU8nw83a5f1lh1A4uhUb3qNdaGRvWyCNaGqvr/7NnN2qDqXuFWfYLFUFV/9dqrrA2N6qUi1oaq+o8xkawNqu4VbtXHWQxV9Ve+fYW1oVFdFs7a0KgevYu1QdW9wq36GIuhqp5yNYVZEqK/jIwt++URz3hEdHFKytWUpLzIiC8jKIlOYFaURvWSMGYJ7TlF9OQvH7wU1HA8oOvS0+YHtH0dynh/mlBVfxC1k1mEP4SEqty3I0LLQratyLci8VNWbfshgmGJlUHVvcKt+ihD6k8kEu8ULr81Ojo6WvgOkXiifuXUlUOF7xCkNUyhqi6RS5jlSh+Y25TkkauPwKy6Gh2/fGZibmkvwE9aiUQuOTk6Sfd96pMzK0pVffIyn1HyUietxtlG8si2VpUWAGyqwH6aJR/O2WGu573Oi8z2pwtV9a7dEcxSMg09Q+7bpTRvB3aoPqFbVWoHmCwKbWFaZVlQda9wqz7CENn7ROpV68jIyIj59pkUIvlE/cjIyMhIfaYk5cxt87KpzVKJRNq8bMjakZ1CvFfItNgCVNWTryQzS2UfmNuUyclX4qJOicXutPUC9MoW70YVJifLYj7rNYFN9ekpsfjUzhhZcvKV5IwBs3kgY2EfZZvZ1pbBrCid6iGrpl/qqyhvcEK3/piv4phv58WQybyg1qtN89DjaGyeB+3IF0GjNAuLXAA2FdHPoARtqKp3RopXTXNYkCy4YBK0D4ODZCH8dlkP9BTIgoM8USqNjpaPOyPF7eHbyeOy4CBZoRbcC0m5Gi5kUhdV9wq36sPMKHiPWCAhQ+n4NpWQnMo4SKzgYMHw8PDwsFIqkUiVw8PDBZQZnj3qmBSlqp5UmbRqYs+JRF/IdGBSXRWJzpX1PeXL73uQFPu9yrw0MHlblZRUmXSs32TWpy/s1tRqtrWmMyiaVJlEo3px8KpxmJd15bofoChvcFobHqRtUaRtUZQ3zNkatSeJUerahqY56NZLA5lUoYZG9V2iVTPRS+rVrOqX0R3VW4507hL1q02MfgjVnzCpi6p7hVv1IUbkvyfJ7nIvc9lNQzNz4LLb56ArOyVlcRwA5mZuZSSQhM7sAKhKJVKrPDOqUomU7C5w2U1MqtKoXpG0auRTpC9y6tEjmLzdkpSUv1t0cncsac6j7iT5FJj7PhGdFIlOikRfRcdXJCVVJFUawTx4YmG3+laTrTWdQdGkCjrVi7YxCDExBs77foqviMnzforb2hVP07xZOz/b8OBEwOiKhedzrQAwlqPNYVJlZaiq348IZ5biaejpDwuShYbeL+kBbb5s21ZPlEqjo+Uj0uTQG9sOj5p6RkSLI5+2zJmalNu2K5mWC78fEY6qe4Vb9UEG3ExPXjpy55OGk5LP3LM3pSckpN90DxntLvD8AnDZjYOD086urGT34zfTE4jDVS67kUnNwcHBQarqieWJzFLRC+bW2siIC3GJ5YmJ5XFR7TqAn+Qrp2W0e95t6Wg/fiFCeEJYMg66VqHwhFB4Qihs1YGt9TizojSqFwatnm9yraB13OuGifzJH7UwcUlxdJPi6CbFUd/+hTmEVq2B2SbrsoWEVq0Bm3EeDMZrWxkVWh6q6vfEAiZpCsmfBO1oswl6L9+T6Wh+rlRHFiYLg68E5U8DOJSF2k89O4TcaTICaB8GBd4SMqp4TyxA1b3CrfoAAy6//0HV4uHZWXaAIAgiIb229ovkFafl6bUDAwMDA41SiUTaOFCbnkA8jcWpvwxV9YSyBCaJyS7RganlUd/k0FFxRnh4xpEWK+jU4eEZpGTHJJQlJJQda7WZWhsSEsoSMobpLsvZ2jKYFaVRvYBYNaN3NDB2UdGsgbGLigxf84SncLelwL/z8y39Be9brQZr7fKF5941WsE1eNg6aISxS9qLqxdaEarqHaKwVdO4I6C7BwDAqfpIHUpcDgygz44dHeHbKz9o+hlgVtXiNDWqQkPdO6hD8yfBZFHpAIxDqdvVDIp2iMJQda9wq65ngMXptOhLDxOHS/V6vcUJXdkpEmmjwe4CgKWDOLjsBr1er9c3SiUEQRD/qHQtVKpKJchn8aSpvwxV9XhZ/KqJPi0odb9ONF+JV7bTXlUHAJi8En1aIEg/0mI1tVQKBOmCnTnx8bJjrTbo7VzcrbMXDOVMisbL4qmqmwsCVo110LjUkr1xdsJgLH1J8fkFK2imCnLtoJkqOGS1Gqy15FV+3eqHAN2OggBzQZ4LDMZK3giDWuTQqC7kr5oxHcyplBbQDgj5faqnvxrXFXd83DwHJsvHC6t+bjp8U8DvEGxTNRlBV9wh5HeU6MDU3MegaIeQj6p7BWPVa4+TD88H8vSNUolEevk45aCdcPz4AfetlOwukB966kGdOJDH5FcMVfW4krhVUzkJPz0s7wWTuj4uriQuKutIi3XhdlxJTOTVFhP0VS7OJPPTw7i4kjS1DXofLO7W2QuGciZF40riaFTP92OaDg2MXlD88+XxpaO6Zio/xw6aqfx3rVaDtXZp8qMv/260wtyDxZEH3WCt12Zt+RXl8v2oqt8ND2WWQgtoB8JD74aHqnYEVOzYcTc89G6xFrS5xVv9irf6FW8NqA1bsaR4Fowjh/2KDzc4wDR1hGGhpaDqXsFYdffhe/H6mtPiVl21cFAnXZtz2e1O94BE2qi3OJc9COC5KgfgtPw21WMvxzJLWS+Y1HWxsZdjKycBwKy+GhZ2LCzs2EctNjAPHSPNPKq2mtR1sbul4bvylu66H43u0MFEGcOiNKrn+a6aR6deVHz2okL5EAAAup0TBqPsRcVn562gmcq7ZAfNVN4/rFaD9YeF+SPS/9CPAsw2WJc2OeSchTnt3++fXb2cJ1TV7whCmKXAAlq9IOSOIPhek9GuTL0jCLlTRL6aaJo6smJJ8A8fNLj/Y9pUYTDjQktB1b2C+Qm8Xq/XL5zA5x1YPKo3Lj6w/N6ygdrjiUuH8bwDBHG4itmp+1NVL45llrJeMKlvee5+rrIuftljl8PSwnflkh8ytZSHlRjMbQ0Ldz0Ljz4ygaGcYVEa1XN5q8bhOQsev2jO5U2Ne56fh1O5OS7QOHLfsVoN1u955lzeoy9eeKA1AGgcK/fJcQHYlC+ov9rEpKg5l0dV/TY/mFnyLdCt5wc3bzs0ZATQ5hb5B9QXdoM2n2ZyCFHuv6XI/92RxZcpTuWhIv8tRYGBjMsF3+YHo+pe8etVJwgiKeuuasHfxZNwg9213N8l1RdezndlpyyeuScdr2VckUb1PUV7Vk1Udjg/rVgH5taGSHEan5/G56fJ3P8e3DfUZgYAMKvK+eHZUXuK9uzJKXVfRDYP/VOcxuenFevA1FzuXsX/sMdk6vmQ/1Ukk7o0qudsYpq7D2H8gjln09T4hPXai4pPv7HCQ2vOy91pzys+fds4Y5i9tenRyef1YwCgcdDucEsxDzDX/bbi5EtMKtKoHrp91dQH8or8csygHdru39BgBJNytNkIoO3O1UB3TpEfbyGBgc1BvkV+vKL3G91/O2au+b/cO+iajQAAPXnumeVBQUzqoupe8etUzztEECnZXa7bXyQmn+kCgKrD1Ovqx/MWXsB/UGkgvcJPlN5bLHpPmkgQRAIz4amqxxTGrJq0QTMAgL0trbBi8f0zfRXL5lT0AZgH02IKY2IUbeaFRyue9mYbMFcwqUunug/TdGrAdNGc4+MwGZwDGgCA2XprzkHnwn4aR46Pw+Qe/IV9LroA3PusGqrq7SHbVs2o+y0zJqWuSAugHXWP/7dybsV3rKdgQWmTUke71eIJ/1xzKpO6qLpX/DrVLU73dXPPMdxC/VNfLrtl4QW807J4RHePew767lGGZ/FU1aMLolkbquqmSy+xNlTV23YEsTaoulf8yhP4NYCqelR+FGtDo/rFF1kbquqtwYGsDaruFetR9d15u1kbGtUvvMDa0Ki+nWBtUHWvWI+qR+ZGsjY0qp//M2tDVV29bStrg6p7xbpUPSeStaFR/Zt/Z22oqqsC/VkbVN0r1qPquy7tYm3oVP831oaqegvhx9qg6l6xHlXfeXEna0Oj+rnnWBsa1bf6sjaoulfMzc1VVVXpdLq1NpoenU5XU1ND/liC8Kxw8XlxxIUIFkZ8Xiw8LSR3O/zVM4azG41f/4mFMZzdOCx9htztzS0vK/15zQFbWBilP++W7yb8yIffzuPHj5uamtrb29daanra29uVSiX5w4aizkeJzorE58UsjOisKPpCNLnbsa//PHb6WePZjSzM2Olnx849T+62cTuh8Nus9OexMAq/zY3BgfhBTr8dl8s1MTFx7dq11tZWVh3bdTpdW1vbtWvXJiYmyB8hWKetE2QJhNlC0TmR6BvW5JxImC0UZAm+e/gdudvp7qqhzA1jWc8YzjxrzGZLDGeeHct6Zihzw8yP5eRuR7+/cZPnU++7qdFvcxNr0ui3ud53002ez/C1a/jxjL+dJ0+eOJ3OiYmJxsbGqqoqOWuoqalRKpVjY2NOp5P8wcBOp7NjoGNv8V5RtkggFbAkEWcj3ix5s62/jdrtTL9qvGDHcNbGocwNLMnI6efGC/nTPzVRuzXcbmvds7vOn1fL82FJ6rf6tsVFj7e0kLtdv6yZ6gAwPz/vdDpnZ2dnZmamWcPMzIzNZqM+u9it9/xrdLtOWUvVYfE5djgcdrt9lgXY7XaHw/G0Zxe79YZ/pW7XI2usOoIgvw+oOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE6DqCMIJUHUE4QSoOoJwAlQdQTgBqo4gnABVRxBOgKojCCdA1RGEE/wvDwlBt0KfFLoAAAAASUVORK5CYII=" 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 需要商业许可,但是您可以通过基于项目 ...

随机推荐

无源码情况下直接修改jar里内容思路
当我们反编译的jar包里class被混淆过,这时反编译出来的java文件会有各种奇葩的问题,不能直接用,比如某框架需要注册码,这个时候我们只能通过层层反编译将验证码相关的部分绕过,如果这个代码不是那么 ...
PHP-数据库长连接mysql_pconnect的细节
PHP的MySQL持久化连接,美好的目标,却拥有糟糕的口碑,往往令人敬而远之.这到底是为啥么.近距离观察后发现,这家伙也不容易啊,要看Apache的脸色,还得听MySQL指挥. 对于作为Apache模 ...
laravel使用的模板引擎 blade
使用blade引擎的话必须在控制器中使用use Blade
HTML5学习笔记音频
HTML5提供了播放音频的标准. Web上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...
ztree获取选中节点
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...
Python 列表 min() 方法
描述 Python 列表 min() 方法返回列表元素中的最小值. 语法 min() 方法语法: min(L) 参数 L -- 要返回最小值的列表. 返回值返回列表元素中的最小值. 实例以下实例展 ...
最短作业优先（SJF）
1. 最短作业优先: 最短作业优先(SJF)是一种调度任务请求的调度策略.每个任务请求包含有请求时间(即向系统提交的请求的时间)和持续时间(即完成任务所需时间). 当前任务完成后,SJF策略会选择最短 ...
mybatis 特殊符号转义和模糊查询和批量插入
1 xml文件特殊符号转义 < < > > <> <> & & ' ...
页面局部加载，适合Ajax Loading场景（Demo整理）
效果图: 完整demo下载
ARM开发工具软件命令具体解释---嵌入式回归第三篇
先从bootloader開始,由于临时眼下这些都会是裸机程序相关. 本人这里是VMwarm10.0上安装的红帽linux虚拟机.从以下的截图中能够看出裸机开发流程: 这里先做第三步(第一步第二步已提 ...

bootstrap基础学习六篇

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

随机推荐

热门专题