bootstrap好看的按钮_bootstrap好看按钮 - CSDN
  • Bootstrap字体图标(Glyphicons):一种web项目中使用的字体图标,Bootstrap 捆绑了 200 多种字体格式的字形。 点击下面的链接可以查看可用的字体图标列表:...

            Bootstrap字体图标(Glyphicons):一种web项目中使用的字体图标,Bootstrap 捆绑了 200 多种字体格式的字形。

               点击下面的链接可以查看可用的字体图标列表:

    http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

            一、用法:

                    如需使用图标,只需要简单使用下面的代码即可实现。class属性值就是不同的字体图标名称。

    <span class="glyphicon glyphicon-search"></span>

            二、定制字体图标:

                    定制字体的尺寸、字体的颜色、应用文本阴影

            三、定制字体样式可能会感觉十分麻烦,现在给大家提供一个借口让你分分秒秒实现自己想要的字体图标。

                    接口链接: http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm


                    紧着着,点击你需要的字体图标,即可生成对应的html代码,如图所示:


            这个功能是不是很强大,哇哦哇哦,小猿真是长见识了!!!

    展开全文
  • Bootstrap复选框和单选按钮美化插件

    万次阅读 2016-11-23 16:29:47
    需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。 checkboxs的样式 radio的样式 只要引入上面所说的文件之后,也可以自己定制样式,代码...

    官网地址
    需要引入awesome-bootstrap-checkbox.cssfont-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。
    checkboxs的样式
    checkboxs样式

    radio的样式
    radio样式

    只要引入上面所说的文件之后,也可以自己定制样式,代码如下:

    .checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #cccccc;<!--没选中时的边框颜色-->
        border-radius: 3px;
        background-color: #fff;<!--没选中时的颜色-->
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    
    }
    
    .checkbox label::after {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
        margin-left: -19px;<!--可以改变“√”的位置-->
        padding-left: 3px;<!--可以改变“√”的位置-->
        padding-top: 1px;<!--可以改变“√”的位置-->
        font-size: 13px;<!--选中后的中间打钩的字体大小(字体越大中间的勾越大越明显)-->
        color: #FAD500;<!--选中后的中间打钩的颜色-->
    }
    
    .checkbox input[type="checkbox"],
    .checkbox input[type="radio"] {
        opacity: 0;
        z-index: 1;
    }
    
    .checkbox input[type="checkbox"]:focus + label::before,
    .checkbox input[type="radio"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        background-color: black;
        border-color: black;
    }
    
    .checkbox input[type="checkbox"]:checked + label::before,
    .checkbox input[type="radio"]:checked + label::before {
        background-color: black;<!--选中后的背景颜色-->
        border-color: black;<!--选中后的边框颜色-->
    }
    
    .checkbox input[type="checkbox"]:checked + label::after,
    .checkbox input[type="radio"]:checked + label::after {
        font-family: "FontAwesome";
        content: "\f00c";
    }
    
    .checkbox input[type="checkbox"]:disabled + label,
    .checkbox input[type="radio"]:disabled + label {
        opacity: 0.65;
    }
    
    .checkbox input[type="checkbox"]:disabled + label::before,
    .checkbox input[type="radio"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed;
    }
    
    .checkbox.checkbox-circle label::before {
        border-radius: 50%;
    <div>
            <div class="checkbox checkbox-circle">
                <input id="radio1" class="styled" type="radio" name="radio">
                <label for="radio1" class="font-bolder">
                    radio1
                </label>
            </div>
            <div class="checkbox checkbox-circle">
                <input id="radio2" class="styled" type="radio" name="radio">
                <label for="radio2" class="font-bolder">
                   raido2
                </label>
            </div>
        </div>

    上面代码执行的效果
    上面代码执行的效果

    展开全文
  • 在线编辑: http://www.runoob.com/try/try.php?filename=bootstrap-button-example   ... http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm ...图标插件(若没有喜欢的按钮...

     

    在线编辑:

    http://www.runoob.com/try/try.php?filename=bootstrap-button-example

     

    在线图标颜色参数快速获取(点击按钮获取htme代码):

    http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

     

    图标插件(若没有喜欢的按钮图标,则用这个去找):

    http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

    展开全文
  • Bootstrap是一个前端框架,可帮助开发人员启动Web开发程序。 Bootstrap网格系统可以创建一个移动友好和响应式的网站。 Bootstrap封装了许多有用的组件,可以很容易地在网站项目中使用。 Bootstrap 是基于 HTML、...

    <--------个人网站传送门-------->

    Bootstrap是一个前端框架,可帮助开发人员启动Web开发程序。

    Bootstrap网格系统可以创建一个移动友好和响应式的网站。

    Bootstrap封装了许多有用的组件,可以很容易地在网站项目中使用。

    Bootstrap 是基于 HTML、CSS、JavaScript 的。

    Bootstrap文件下载链接

    打开代码编辑器并创建一个新的HTML文件

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Basic Bootstrap Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
    </body>
    </html>

    在页面底部包含JavaScript文件 – 在关闭<body>标签(即</body>)之前,以提高网页的性能。
    注意css和Javascript的相对路径。

    附上来自菜鸟联盟提供的几个链接:

    <!– 新 Bootstrap 核心 CSS 文件 –>

    <link href=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css“ rel=“stylesheet“>

    <!– 可选的Bootstrap主题文件(一般不使用) –>

    <script src=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css“></script>

    <!– jQuery文件。务必在bootstrap.min.js 之前引入 –>

    <script src=“https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“></script>

    <!– 最新的 Bootstrap 核心 JavaScript 文件 –>

    <script src=“https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js“></script>

    网格系统允许我们正确地布局我们网站的内容。

    它将屏幕划分为多个行和列,可用于创建各种类型的布局。

    一旦我们定义了行和列,我们可以在其中放置HTML元素。

    Bootstrap的网格系统将屏幕划分为列 – 每行最多12个。

    列宽根据屏幕的大小而变化。

    因此,Bootstrap的网格系统是响应式的,因为当浏览器窗口的大小改变时,列动态地调整大小。

    Bootstrap也有很多非常好看的button 按钮标签可以使用,比起HTML自定义的按钮好看很多。

    用法: <button class=”btn btn-XX”>name </button>

    按钮有各种颜色选项:

    • btn-default为白色
    • btn-primary为深蓝色
    • btn-success为绿色
    • btn-info为浅蓝色
    • btn-warning为橙色
    • btn-danger为红色

    各种尺寸:

    • btn-lg用于大按钮
    • btn-sm用于小按钮
    • btn-xs用于超小的按钮

    还有一些辅助类的按钮可用:

    • btn-block将使按钮跨越整个网格
    • active将使按钮看起来像它当前点击
    • disabled将使按钮无法单击并显示渐变色。

    下面是在站点或 app 中使用图标的通用语法:

    <i class=”icon_class_name”></i>

    引用链接: <link rel=”stylesheet” href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css”>

    各图标详情介绍戳这里!

    一个比较实用的东东,可以写在类似于按钮里面。下面附一段代码和其效果图。

    <!DOCTYPE html>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <html>
    <head>
    	<title>try</title>
    </head>
    <body>
    <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <div class="col-xs-4">
    <button class="btn btn-block btn-danger active"><i class="glyphicon glyphicon-heart">  Like</i></button>
    <button class="btn btn-block btn-success"><i class="glyphicon glyphicon-tree-deciduous"> 123</i></button>
    <button class="btn btn-block btn-warning"><i class="glyphicon glyphicon-repeat"> Refresh</i></button>
    <button class="btn btn-block btn-info"><i class="glyphicon glyphicon-search"> Search</i></button>
    </div>
    </body>
    </html>

     关于Bootstrap,还有好多好多,慢慢探索吧。(o゚▽゚)o

    展开全文
  • bootstrap 制作一个简洁美观的页面

    万次阅读 多人点赞 2016-08-02 21:46:08
    今天学习了bootstrap的一些基础组件,然后用了其中的一些组件制作了一个页面,在这里分享一下,希望大家不要嫌弃 某管理系统 body{ margin-top: 65px; } .col-md-2{ background-color: #ccc; /*...
  • bootstrap中 几个漂亮的按钮样式

    万次阅读 2018-01-22 10:34:33
    此博文是在菜鸟教程上看到的。 对于初学者很是有帮助,所以把这篇博文放上来,供大家参考。 源课程: ... ...再附上 文本显示颜色及图表的地址: ...http://www.runoob.com/try/demo_source/bootstrap-glyph-cu
  • Bootstrap 按钮的尺寸

    万次阅读 2018-05-24 17:05:27
    按钮的尺寸Bootstrap提供了 3 个相对尺寸的类,用来设置按钮的尺寸。如果希望比默认按钮大一些,使用 .btn-large 类;希望比默认按钮小一些,使用 .btn-mini 或 .btn-small 类。如:&lt;p&gt; &lt;...
  • 修改Bootstrap轮播按钮

    千次阅读 2019-01-20 20:53:00
    修改Bootstrap轮播按钮位置及样式 开发工具与关键技术:DW 前端开发 作者:吴业华 撰写时间:2019年1月18日 下图为引入Bootstrap轮播: 在图中我们可以看到轮播的按钮样式都是Bootstrap默认的 但我想这把...
  • Bootstrap 按钮状态提示

    千次阅读 2018-05-28 17:27:22
    按钮Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件。Bootstrap中,按钮被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换...
  • Bootstrap中的按钮插件(button.js)被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。 在页面多次加载之间,Firefox 仍然保持表单控件的状态(禁用状态和选择状态)。一个...
  • Bootstrap设置按钮禁用

    千次阅读 2019-03-24 15:09:56
    Bootstrap框架中,按钮可以使用button标签或者a标签。设置按钮禁用可以通过两种方式,一种是通用CSS样式,一种是用过JS脚本动态设置,下面举例说明! <!DOCTYPE html> <html> <head> <meta ...
  • Bootstrap3 按钮状态切换

    千次阅读 2019-06-01 17:53:30
    按钮状态切换 将单个按钮的 data-toggle 属性设置 button,或通过简单的JavaScript编程,就可以激活按钮的行为状态,让它在未激活和激活状态之间来回切换。如: <buttonclass="btn btn-primary"data-toggle=...
  • Bootstrap按钮组中按钮的尺寸

    千次阅读 2019-05-21 16:26:27
    考虑到这种方式比较麻烦,Bootstrap专门为按钮组提供了额外的尺寸类.btn-group-lg、.btn-group-sm、.btn-group-xs,只要给.btn-group添加这些尺寸类,就不必为按钮组中的每个按钮都赋予尺寸类了,方便省事。...
  • Bootstrap 禁用的按钮

    万次阅读 2018-05-24 17:05:58
    禁用的按钮对于链接,只要添加 .disabled 类,就可以实现颜色变浅、褪掉渐变的效果,并让按钮看起来无法点击。当鼠标移动按钮上时,按钮的样式不再发生变化。如:&lt;a href="#" class="btn btn-...
  • bootstrap button按钮长度

    万次阅读 2015-08-20 10:35:33
    默认情况下button的长度是自动的,如果你想... To use the full width of the container within which the button is residing, Bootstrap 3 offers block button option.  使用按钮的block样式,让其与父容器等宽
  • Bootstrap3 按钮标签(空格分隔): Bootstrap改进之前的按钮让它变得更加智能效果图:
  • Bootstrap—使用按钮

    2016-12-14 13:30:20
    Bootstrap按钮组是将一组按钮放在一个拥有class="btn-group"的div中,这些button给他加上.btn或者.btn-success样式,让这些按钮形成一个组,效果如下: 从图片中可以看出,使用按钮组包裹起来的按钮,当点击其中...
  • bootstrap点击按钮关闭模态框 只要给按钮加上 data-dissmiss=“modal” 就会在点击后关闭模态框
  • bootstrap按钮下拉菜单

    千次阅读 2019-06-29 17:56:18
    使用 Bootstrap class 向按钮添加下拉菜单。向按钮添加下拉菜单,只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 基本...
  • Bootstrap-查询按钮和重置按钮

    万次阅读 2016-05-30 23:38:01
    1、问题背景 一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态2、实现源码 Bootstrap-查询按钮和重置按钮 ...
1 2 3 4 5 ... 20
收藏数 41,621
精华内容 16,648
关键字:

bootstrap好看的按钮