2017-04-04 09:52:50 yang5726685 阅读数 721

Bootstrap按钮样式



1.新建一个web项目ch07。


2.在ch07中新建一个demo01.html,将css文件模版导入进来。


button1.png


3.将移动设备优先拷贝到demo01的头文件中。


<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no”>


button2.png


4.导入css文件


button3.png


5.定义一个button


<div class="container">

<button type="button" class="btn btn-danger">大家好</button>

     /*"btn btn-info"是样式,一个css组件设计思想是辅加这种模式,就是先定义这种样式然后再追加一个样式。*/

</div>


6.运行效果,鼠标移上是默认是有效果的。


button4.png


当然,它定义了七种样式,比如说"btn btn-info"


<div class="container">

     <button type="button" class="btn btn-info">大家好</button>

</div>


运行效果:


button5.png


7.定义按钮的七种样式,我们先给它增加一个样式叫btn,然后再加btn的样式,样式有默认样式、首选项、成功、一般信息、警告、危险、链接。


<!-- Standard button -->

<button type="button" class="btn btn-default ">(默认样式)

Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary">(首选项)Primary</button>


<!-- Indicates a successful or positive action -->

<button type="button" class="btn btn-success ">(成功)Success</button>


<!-- Contextual button for informational alert messages -->

<button type="button" class="btn btn-info">(一般信息)Info</button>


<!-- Indicates caution should be taken with this action -->

<button type="button" class="btn btn-warning">(警告)Warning</button>


<!-- Indicates a dangerous or potentially negative action -->

<button type="button" class="btn btn-danger">(危险)Danger</button>


<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->


<button type="button" class="btn btn-link">(链接)Link</button>


8.运行效果


button6.png


注意:按钮大小取决于按钮里面文字的大小

2015-12-27 17:47:49 iteye_17658 阅读数 218

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:
以下样式可用于<a>, <button>, 或 <input> 元素上:

 

描述
.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

禁用按钮

 
按钮大小
Class
描述
btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。
 
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>

显示效果:

bootstrap按钮组样式

阅读数 475

bootstrap按钮组:btn-group

博文 来自: danqiu2017

Bootstrap按钮

阅读数 298

Bootstrap按钮的外观

阅读数 215

bootstrap 按钮样式

阅读数 235

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