bootstrap-按钮（按钮工具栏）

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单控件——按钮（按钮工具栏）</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <div class="btn-toolbar">
          <div class="btn-group">
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-left"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-center"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-right"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-justify"></span></button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-indent-left"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-indent-right"></span></button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-font"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-bold"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-italic"></span></button>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-text-height"></span></button>
            <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-text-width"></span></button>
          </div>
    </div>   

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-12-20 11:08:53

bootstrap-按钮（按钮工具栏）的相关文章

Bootstrap学习按钮组

把一系列的.btn按钮放入.btn-group中即可... <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>

一直很喜欢Bootstrap的按钮风格,仿照Bootstrap做了一套按钮,在ie6/7/8/9/10/11.chrome.firefox下能正常使用.ie6/7/8不支持css3的样式,按钮在这些模式下没有圆角效果.在ie6/7下使用button标签能显示正常效果,使用其他标签存在文字偏移和背景显示不完整. 按钮支持div/span/input/button等元素,大小分为rhui-btn-large.rhui-btn.rhui-btn-small和rhui-btn-min四个级别,效果如下

bootstrap之按钮和图片

一.按钮类描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 .btn-xs 制作一个超小按钮

BootStrap开发-按钮

一按钮的基本样式 Bootstrap提供一组标准的按钮配色和大小调整方案,只需要简单的应用的按钮类即可.BootStrap3提供了按钮的标准样式如图. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css

bootstrap 多按钮共用模态框传自定义参

<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 模态框(Modal)插件事件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.ba

Bootstrap单按钮的下拉菜单

简介把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootstrap 版本中. 完整代码: <!DOCTYPE HTML><html><head><link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <scr

Bootstrap 关于按钮组

当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定 container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)? 对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar". 按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的 role 属性,我们使用 aria-label,但是, aria-labelledby

yii2 配合bootstrap添加按钮

新增一个按钮 1.bootstrap 官网:http://getbootstrap.com/ 2.bootstrap 中文官网:http://v3.bootcss.com/ 在视图文件中: <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ [ 'class' => 'yii\grid\ActionColumn', // 按钮

bootstrap -- css -- 按钮

本文中提到的按钮样式,适用于:<a>, <button>, 或 <input> 元素上但最好在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题按钮基本样式 .btn:为按钮添加基本样式按钮颜色 .btn-default:白色 (background-color: #ffffff;) .btn-primary:深蓝色 (background-color: #428bca;) .btn-success:绿色 (background

bootstrap重新设计按钮样式

1.将btn的样式换成以下的样式 2.思路: (1)将原来的btn样式设置color:#FFF,同时text-shadow设置,这样原来的btn样式就会变淡了,后面再加上新的样式就可以覆盖掉注意:要将active,hover,focus都设置成一样的. (2)加上新的btn样式,对active,hover,focus分别进行设置源码: HTML: <div class="text-center bk-margin-top-10 bk-margin-bottom-30">