文档章节

4.1、Bootstrap V4自学之路------组件---按钮

Asktao
 Asktao
发布于 2016/03/23 16:25
字数 1363
阅读 254
收藏 0


1、一个示例

<!-- 确定按钮 -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- 次等按钮,比如取消-->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- 指示成功或积极行为 -->
<button type="button" class="btn btn-success">Success</button>

<!-- 信息提醒按钮-->
<button type="button" class="btn btn-info">Info</button>

<!-- 提示需要谨慎的行为 -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- 表示危险或潜在的负作用行为 -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- 强调一个按钮,使它看起来像一个链接的同时保持按钮的行为 -->
<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-success" value="Success">

默认样式的<button>就不写了,哈哈 样子比较起来真的好难看。

PS:通过BS的学习,发现在web开发时,代码也存在语义。真是大大的丰富了文本的内涵。感觉很赞。

2、按钮标签

<a class="btn btn-primary" href="#">Link</a>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

PS: 1、.btn 类可以是在用<a>、<button>、<input type=button>和<input type=sumbit>中。

        2、<a>标签中的role属性,其意义有两种。一:纯语义。二:协助其他控件(屏幕阅读器)传达某个指定意义

3、描边按钮

        需要一个按钮,但是不要他们自带的背景颜色?请用 .btn-*-outline 代替默认的修饰类,移除这些按钮上面的所有的背景底图和底色。

<button type="button" class="btn btn-primary-outline">btn-primary-outline</button>
<button type="button" class="btn btn-secondary-outline">btn-secondary-outline</button>
<button type="button" class="btn btn-success-outline">btn-success-outline</button>
<button type="button" class="btn btn-warning-outline">btn-warning-outline</button>
<button type="button" class="btn btn-danger-outline">btn-danger-outline</button>

PS:如上所述,也可以使用在<a>、<button>和<input>中。

4、按钮尺寸

<div class="row">
    <div class="col-sm-12">
          <button type="button" class="btn btn-primary btn-lg">class="btn btn-primary btn-lg"</button>
          <button type="button" class="btn btn-secondary btn-lg">class="btn btn-secondary btn-lg"</button>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
          <button type="button" class="btn btn-primary">class="btn btn-primary"</button>
          <button type="button" class="btn btn-secondary">class="btn btn-secondary"</button>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
          <button type="button" class="btn btn-primary btn-sm">class="btn btn-primary btn-sm"</button>
          <button type="button" class="btn btn-secondary btn-sm">class="btn btn-secondary btn-sm"</button>
    </div>
</div>

PS:从高度看出每个尺寸的差别。

下图是使用 .btn-block类。将按钮元素充满整个父类宽度。

<div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg btn-block">class="btn-lg btn-block"</button>
      <button type="button" class="btn btn-secondary btn-lg btn-block">class="btn-lg btn-block"</button>
</div>

<div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-block">class="btn-block"</button>
      <button type="button" class="btn btn-secondary btn-block">class="btn-block"</button>
</div>

<div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-sm btn-block">class="btn-sm btn-block"</button>
      <button type="button" class="btn btn-secondary btn-sm btn-block">class="btn-sm btn-block"</button>
</div>

5、激活状态

激活状态是指,按钮呈现被按下时的样子。只需要在按钮上 .active 类

<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg" role="button">Link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>

PS:效果确实是hover的状态。但鼠标浮动在 .active类的按钮上时,颜色会更加深一些

6、禁用状态

<div class="col-sm-12">
    <div>《button》标签可以使用HTML5的属性 disabled在禁止使用,光标会变禁用样式</div>
    <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</div>
<div class="col-sm-12">
    <div>由于《a》标签不支持disabled属性,则使用bs提供的.disabled类伪装。光标无变化</div>
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
</div>


7、按钮插件

还可以对按钮做更多。可以控制按钮的状态或者为更多组件创建按钮组,像工具栏之类的。

切换状态

<div class="col-sm-12">
  <button type="button" class="btn btn-primary" data-toggle="button">
    class="btn btn-primary" 增加属性  data-toggle="button"
  </button>
</div>
<div class="col-sm-12">
  <button type="button" class="btn btn-primary active" data-toggle="button">
     class="btn btn-primary active" 增加属性  data-toggle="button"
  </button>
  
</div>

PS:增加 data-toggle="button" 属性的效果是,点击后按钮保持被active状态。

如果需要初始时就显示active的状态,需要手动加入 .active类和属性aria-pressed="true"

复选框和单选按钮

复选框

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-primary">
      <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-primary">
      <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
  </div>
</div>

使用按钮组,给按钮组加入属性 data-toggle="button"。按钮组中的按钮都享受。

如果需要在初始时就是选装状态,则需要在  <label>标签手动加入 .active类。复选框手动checked。

单选框

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

使用按钮组,给按钮组加入属性 data-toggle="button"。按钮组中的按钮都享受。

如果需要在初始时就是选装状态,则需要在  <label>标签手动加入 .active类。复选框手动checked。


方法(function)

$().button('toggle')      切换到按下状态。给按钮一个它已经被激活的外观。

<button id="abc" class="btn btn-success">test</button>
<button onclick="active_btn()" class="btn btn-warning">active_btn()</button>

<script type="text/javascript">
    function active_btn(){
        $("#abc").button("toggle");
    }
</script>

PS: 点击按钮 active_a()  ,test目标显示被选中。再次点击,test取消选中。

© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
444
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
335
0
4.9、Bootstrap V4自学之路------组件---提示

示例 Alert对任何长度的文本都可用,同时还可以视情况添加“抹除”按钮。为了适当的样式,必须使用下文中四个类中的一个(例如,)。对于行内的抹除,请使用alerts jQuery 插件。 <div class...

Asktao
2016/03/24
34
2
4.2、Bootstrap V4自学之路------组件---按钮组

1、基本示例 用把一系列带有的按钮包裹起来。 <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button ......

Asktao
2016/03/23
74
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
159
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 自定义登录认证(二)

一、前言 本篇文章将讲述Spring Security自定义登录认证校验用户名、密码,自定义密码加密方式,以及在前后端分离的情况下认证失败或成功处理返回json格式数据 温馨小提示:Spring Security...

郑清
34分钟前
3
0
php yield关键字以及协程的实现

php的yield是在php5.5版本就出来了,而在初级php界却很少有人提起,我就说说个人对php yield的理解 Iterator接口 在php中,除了数组,对象可以被foreach遍历之外,还有另外一种特殊对象,也就是继承...

冻结not
47分钟前
4
0
servlet请求和响应的过程

本文转载于:专业的前端网站➥servlet请求和响应的过程 1.加载 Servlet类被加载到Java虚拟机中,并且实例化。在这个过程中,web容器(例如tomcat)会调用Servlet类的公开无参构造函数,产生一...

前端老手
47分钟前
4
0
golang 1.13 errors 包来了,不用写“err 气功波”代码

引 这篇是对 errors 包 的姿势挖掘 气功波错误代码 从 http.Get()返回的错误 判断 syscall.ECONNREFUSED 错误.以前要对 go 标准库 error 结构有点熟悉,才能写出下面的代码 func CmdErr(err ...

guonaihong
51分钟前
28
0
喜玛拉雅已听书单

时间倒序排 书名 作者 状态 唐砖 孑与2 进行中 死灵之书(克苏鲁神话合集) 阿卜杜拉·阿尔哈萨德 进行中 赡养人类 刘慈欣 完结 赡养上帝 刘慈欣 完结 中国太阳 刘慈欣 完结 中国太阳 刘慈欣...

Alex_Java
52分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部