zoukankan      html  css  js  c++  java
  • Bootstrap 按钮

    摘要:这篇笔记主要是关于bootstrap提供的定义按钮的不同样式 。

    1.按钮样式总结

    以下样式可以用在<a>、<button>、<input>元素上。

    因为:<a role="button"  href="#">、<input type="button">、<input type="submit">等表现出来的是按钮的形状

    不过还是建议在<button>元素上使用按钮class,避免跨浏览器的不一致问题。

    用法:<button class="btn btn-default">按钮</button>

    样式示例:

    <!-- 标准的按钮 -->
    <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>

    结果:

    1.1 按钮大小

    上表显示,.btn-lg、.btn-sm、 .btn-xs、.btn-md(正常大小)、.btn-block是用来调整按钮大小的类。

    代码示例:

    <div class="container">
        <div>
            <button class="btn btn-danger btn-lg">btn-lg</button>
            <button class="btn btn-primary btn-md">btn-md</button>
            <button class="btn btn-info btn-sm">btn-sm</button>
            <button class="btn btn-success btn-xs">btn-xs</button>
            <button class="btn btn-warning btn-block">btn-block(与父元素同宽)</button>
        </div>
    </div>

    显示如下:


    1.2 按钮状态

      bootstrap提供了按钮激活、禁用等状态的类。

      按钮处于激活状态(active)时,其外观会发生变化,呈现深色的背景、边框和阴影,<a  href="#" class="btn btn-primary active" role="button">。

      按钮处于禁用状态(disabled)时,按钮颜色会变淡50%,并失去渐变,点击时不会发生任何变化,<button class="btn btn-primary active">;

      这两种状态都能用于按钮元素<button>和锚元素<a>

    注意!

      与表单输入框等禁用状态不同,锚元素的禁止状态是由决定的,不是属性。例如,<a href="#" class="btn btn-primary disabled" role="button">。;

      按钮元素的禁用状态是由disabled属性决定的。例如,。<button class="btn btn-primary" disabled="disabled">。

    2.字体图标(glyphicons)

    字体图标是在web项目中使用的图标字体,bootstrap捆绑了200多种字体格式的字形。

    2.1 用法

    代码:<span class="glyphicon glyphicon-search"></span>

    字体图标经常和按钮元素搭配使用:

    <button class="btn btn-primary">
        <span class="glyphicon glyphicon-search"></span>搜索
    </button>
    <button class="btn btn-primary">
        <span class="glyphicon glyphicon-user"></span>用户
    </button>
    <button class="btn btn-default">
        <span class="glyphicon glyphicon-home"></span>首页
    </button>
    <button class="btn btn-info">
        <span class="glyphicon glyphicon-shopping-cart"></span>购物
    </button>

    显示如下:

    2.2 定制字体图标

    通过改变字体的尺寸、颜色和应用文本阴影来进行定制图标。

     尺寸:

    <button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-primary btn-lg" style="font-size: 30px">
        <span class="glyphicon glyphicon-user"></span> User
    </button>

    颜色:

    <button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-primary btn-lg" style="color: black;">
        <span class="glyphicon glyphicon-user"></span> User
    </button>

    文本阴影:

    <button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-primary btn-lg" style="text-shadow: red 9px 6px 6px;">
        <span class="glyphicon glyphicon-user"></span> User
    </button>

     


     3.按钮组

    3.1 基本的按钮组(.btn-group)

    把带有类.btn 的按钮放在 .btn-group的容器中,形成按钮组。实例:

    <div class="btn-group"> 
        <button type="button" class="btn btn-default">按钮 1</button> 
        <button type="button" class="btn btn-success">按钮 2</button> 
        <button type="button" class="btn btn-primary">按钮 3</button> 
        <button type="button" class="btn btn-default">按钮 4</button> 
    </div>

    显示:

    3.2 按钮工具(.btn-toolbar)

    把几组带有类 .btn-group 的组件放在带有 .btn-toolbar 的大容器中,形成更加复杂的组件。示例:

     1 <div class="btn-toolbar" role="toolbar"> 
     2     <div class="btn-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     </div> 
     7     <div class="btn-group"> 
     8         <button type="button" class="btn btn-default">按钮 4</button> 
     9         <button type="button" class="btn btn-default">按钮 5</button> 
    10         <button type="button" class="btn btn-default">按钮 6</button> 
    11     </div> 
    12     <div class="btn-group"> 
    13         <button type="button" class="btn btn-default">按钮 7</button> 
    14         <button type="button" class="btn btn-default">按钮 8</button> 
    15         <button type="button" class="btn btn-default">按钮 9</button> 
    16     </div> 
    17 </div>

    显示:

    3.3 按钮大小(.btn-group-lg、.btn-group-md、.btn-group-sm、.btn-group-xs)

    在<div class=".btn-group">中添加类 .btn-group-* 来改变整组按钮的大小。 如<dic class=".btn-group btn-group-lg">。

    在以上按钮工具中改变按钮大小。例如,在第2行、第7行、第12行分别添加类 .btn-group-lg、.btn-group-sm、btn-group-xs。结果如下:

    3.4 嵌套

    在一个 .btn-groug 组件中嵌套另一个 .btn-group 组件,经常与下拉菜单一块使用。代码示例:

     1 <div class="btn-group"> 
     2     <button type="button" class="btn btn-default">按钮 1</button> 
     3     <button type="button" class="btn btn-default">按钮 2</button> 
     4     <div class="btn-group"> 
     5         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     6             按钮3 <span class="caret"></span> 
     7         </button> 
     8         <ul class="dropdown-menu"> 
     9             <li><a href="#">下拉链接 1</a></li> 
    10             <li><a href="#">下拉链接 2</a></li> 
    11         </ul> 
    12     </div> 
    13 </div>

    显示:

    3.5 按钮组垂直(.btn-group-vertical)

    把上面的程序的第1行和第4行中的<div class="btn-group">替换成<div class="btn-group-vertical">即可。结果显示如下:

    4 按钮下拉菜单

    4.1 基本的按钮下拉菜单

    把按钮与下拉菜单结合使用,只需要在一个.btn-group中放置按钮和下拉菜单即可。代码示例如3.4中的嵌套代码。

    4.2 分割的按钮下拉菜单

    形如:。其实是两个按钮组成,左边的按钮可以带有链接,也可以不带;右边的按钮与下拉菜单相结合,进而组成分割的按钮下拉菜单。

    代码示例:

     1 <div class="btn-group">
     2     <button class="btn btn-primary">按钮</button>
     3     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
     4         <span class="caret"></span>
     5         <span class="sr-only">下拉菜单触发器</span>
     6     </button> 
     7     <ul class="dropdown-menu" role="menu"> 
     8         <li><a href="#">功能1</a></li> 
     9         <li><a href="#">功能2</a></li> 
    10         <li><a href="#">功能3</a></li> 
    11         <li class="divider"></li> 
    12         <li><a href="#">分离的链接</a></li> 
    13     </ul> 
    14 </div> 

    形如:

    4.3 按钮下拉菜单的大小(.btn-lg、.btn-sm、.btn-xs)

    向.btn-group中的<button>元素添加类 .btn-lg、.btn-sm、.btn-xs,即可改变 按钮下拉菜单的大小。形如:

    4.4 按钮上拉菜单(dropup)向父容器 .btn-group 添加类 .dropup即可。代码示例;

     1 <div class="btn-group dropup"> 
     2     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
     3         按钮1<span class="caret"></span> 
     4     </button> 
     5     <ul class="dropdown-menu" role="menu"> 
     6         <li><a href="#">功能1</a></li> 
     7         <li><a href="#">功能2</a></li> 
     8         <li><a href="#">功能3</a></li> 
     9         <li class="divider"></li> 
    10         <li><a href="#">分离的链接</a></li> 
    11     </ul> 
    12 </div>

    显示如下:

     

  • 相关阅读:
    48. Rotate Image
    47. Permutations II
    46. Permutations
    45. Jump Game II
    44. Wildcard Matching
    43. Multiply Strings
    42. Trapping Rain Water
    41. First Missing Positive
    40. Combination Sum II
    39. Combination Sum
  • 原文地址:https://www.cnblogs.com/buchongming/p/5809827.html
Copyright © 2011-2022 走看看