2018-05-17 16:02:48 qq_37499398 阅读数 1728

Create a Block Element Bootstrap Button


通常情况下,你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素,你的按钮将会伸展并填满页面整个水平空间,任何在它之下的元素都会跟着浮动至该区块的下一行。

这张图阐述了行内元素与块级元素的区别:

An

注意,这些按钮仍然需要 btn class。

添加Bootstrap的 btn-block class 到你的按钮。



2019-07-23 23:50:01 qq_27870421 阅读数 40

一、按钮组

1.1 基本按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group类来创建按钮组。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>按钮组</h2>
  <p> .btn-group 类用于创建按钮组:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

在这里插入图片描述

1.2 设置按钮组大小

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>按钮组大小</h2>
  <p>我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。</p>
  <h3>大按钮:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>默认按钮:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>小按钮:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

在这里插入图片描述

1.3 垂直按钮组


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>垂直按钮组</h2>
  <p>U可以使用 .btn-group-vertical 类来创建垂直的按钮组:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

在这里插入图片描述
1.4 内嵌按钮组及下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>内嵌按钮组</h2>
  <p>按钮组设置下拉菜单:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述
1.5 拆分按钮下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>拆分按钮下拉菜单</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

1.6 垂直按钮组及下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>垂直按钮组及下拉菜单</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

2018-12-01 02:39:53 LoveyourselfJiuhao 阅读数 107

BootStrap按钮样式、类型、代码、显示效果

按钮最好使用button类型的,以免垮浏览器或一些其他操作存在兼容性问题。

1. 选项按钮

btn btn-default样式:渐变标准灰色,默认按钮

btn btn-primary样式:蓝色,提供额外的视觉感,可在一系列按钮中指出主要操作

btn btn-success样式:浅蓝色,可作为默认样式的代替样式

btn btn-info样式:绿色,标识成功或积极的动作

btn btn-warning样式:黄色,提示应该金身的动作

btn btn-danger样式:洪作,提示危险或存在危险的动作

btn btn-link样式:浅蓝色,简化一个按钮,是他看起来像一个连接同时保持按钮的行为

2. 选项尺寸

btn btn-lg样式:设置大尺寸

btn btn-sm样式:设置中等尺寸

btn btn-small样式:默认尺寸(不用填写)

btn btn-xs样式:设置最小尺寸

btn btn-block样式:使按钮设置为块样式,+lg样式可填充满整个父容器

3.设置按钮活动状态

btn active样式:默认使控件成为活动状态,即点击后的状态

4.设置按钮禁用状态

disabled属性:即disabled="disabled",设置控件为不可交互响应状态,不可点击

btn disabled样式:设置控件为不可交互响应状态,不可点击

5.可做按钮使用的HTML标签

<button type="submit">

<button type="button">

<a href="#" role="button">

<input type="submit">

<input type="button">

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- 1. 选项按钮
    btn btn-default样式:渐变标准灰色,默认按钮
    btn btn-primary样式:蓝色,提供额外的视觉感,可在一系列按钮中指出主要操作
    btn btn-success样式:浅蓝色,可作为默认样式的代替样式
    btn btn-info样式:绿色,标识成功或积极的动作
    btn btn-warning样式:黄色,提示应该金身的动作
    btn btn-danger样式:洪作,提示危险或存在危险的动作
    btn btn-link样式:浅蓝色,简化一个按钮,是他看起来像一个连接同时保持按钮的行为
    -->
    <div class="container">
        <button class="btn btn-default" type="buttton">Default</button>
        <button class="btn btn-primary" type="button">Primary</button>
        <button class="btn btn-success" type="button">Success</button>
        <button class="btn btn-info" type="button">Info</button>
        <button class="btn btn-warning" type="button">Warning</button>
        <button class="btn btn-danger" type="button">Danger</button>
        <button class="btn btn-link" type="button">Link</button>
    </div>
    
     <!-- 2. 选项尺寸
    btn btn-lg样式:设置大尺寸
    btn btn-sm样式:设置中等尺寸
    btn btn-small样式:默认尺寸(不用填写)
    btn btn-xs样式:设置最小尺寸
    btn btn-block样式:使按钮设置为块样式,+lg样式可填充满整个父容器
    -->
    <div class="container">
       <p>
        <button class="btn btn-default btn-lg" type="buttton">Large Default Button</button>
        <button class="btn btn-primary btn-lg" type="button">Large Primary Button</button>
       </p>
       <p>
        <button class="btn btn-success" type="button">Default Success Button</button>
        <button class="btn btn-info" type="button">Default Info Button</button>
       </p>
       <p>
        <button class="btn btn-warning btn-sm" type="button">Small Warning Button</button>
        <button class="btn btn-danger btn-sm" type="button">Small Danger Button</button>
       </p>
       
       <p>
        <button class="btn btn-warning btn-xs" type="button">Extra Small Button</button>
        <button class="btn btn-danger btn-xs" type="button">Extra Small Button</button>
       </p>
       
       <p>
        <button class="btn btn-warning btn-lg btn-block" type="button">Block Level Button</button>
        <button class="btn btn-danger btn-lg btn-block" type="button">Block Level Button</button>
       </p>
    </div>
    
    <!--3.设置按钮活动状态 
    btn active样式:默认使控件成为活动状态,即点击后的状态
    -->
    <div class="container">
        <p>
        <button class="btn btn-default active" type="button">Active Default Button</button>
        <button class="btn btn-danger active" type="button">Active  Danger Button</button>
       </p>
    </div>
    
     <!--4.设置按钮禁用状态 
    disabled属性:即disabled="disabled",设置控件为不可交互响应状态,不可点击
    btn disabled样式:设置控件为不可交互响应状态,不可点击
    -->
    <div class="container">
        <p>
        <button class="btn btn-default " type="button" disabled="disabled">Disabled Default Button</button>
        <button class="btn btn-info disabled" type="button" >Disabled  Info Button</button>
        
        <a href="#" class="btn btn-primary disabled" role="button">Primary Disabled Button</a>
        <a href="#" class="btn btn-default" role="button" disabled="disabled">Default Disabled Button</a>
       </p>
    </div>
    
    <!--5.可做按钮使用的HTML标签 
    <button type="submit">
    <button type="button">
    <a href="#" role="button">
    <input type="submit">
    <input type="button">
    -->
    <div class="container">
        <button class="btn btn-default" type="submit">Submit</button>
        <button class="btn btn-parimary" type="button">Button</button>
        <a href="#" class="btn btn-warning" role="button">Link Button</a>
        <input type="button" class="btn btn-default" type="submit" value="Input Button">
        <input type="button" class="btn btn-default" type="button" value="Input Button">
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

显示效果:

2016-07-13 10:06:37 strwolf 阅读数 223

1、添加了一个reFlag键,lisheng那个是个方法,把键值一直传着走就可以了,我之前还没想到,但是部署上出现了协调沟通问题,还是要多走出工位,多沟通交流才行!

2、用那个前端模板改好了模型结果分析的页面,bootstrap风格的按钮一般用的是class="btn btn-default",然后要把各个表单元素放在一个form标签中,form标签class="form-inline"内联控件组 role=“form”没去深究似乎都加的,文本框(H5日期控件)要用form-control,label标签用control-label(但是我并没有看到加不加这个有什么差异),还遇到一个问题就是,js没能跑$(document).ready(function(){}),难道是因为有一个报错使得dom不能完全加载完成?我后来是直接绑定事件,不考虑是否dom加载完成

3、然后我发现那个前端模板全是写成的静态的,需要一个方法,做成那种模板渲染的形式,有些公用的部分就公用的,这个可能要用php的模板框架,还需要去研究一下,发现的一个叫做smarty

4、另外处理了一些紧急情况和杂事

5、要分清楚工作的优先级,不要冲动,无脑怼,很多事包括生活上的事都要去做,然后其实那些游戏视频啊咨询啊没必要去看,挺无聊浪费时间的,直接去做,才是最高效的!

2019-05-14 16:28:45 ixygj197875 阅读数 120

按钮工具栏

如果想在一行内放置多个按钮组,只需把这些按钮组统统放到一个类为 .btn-toolbar 的容器中即可。常常用它来创建按钮工具栏。如:

  1. <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  2.   <div class="btn-group" role="group" aria-label="First group">
  3.     <button type="button" class="btn btn-default">1</button>
  4.     <button type="button" class="btn btn-default">2</button>
  5.     <button type="button" class="btn btn-default">3</button>
  6.     <button type="button" class="btn btn-default">4</button>
  7.   </div>
  8.   <div class="btn-group" role="group" aria-label="Second group">
  9.     <button type="button" class="btn btn-default">5</button>
  10.     <button type="button" class="btn btn-default">6</button>
  11.     <button type="button" class="btn btn-default">7</button>
  12.   </div>
  13.   <div class="btn-group" role="group" aria-label="Third group">
  14.     <button type="button" class="btn btn-default">8</button>
  15.   </div>
  16. </div>

效果如图 3‑16所示:

按钮工具栏

图3-16 按钮工具栏

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

BootStrap按钮组

阅读数 86

没有更多推荐了,返回首页