zoukankan      html  css  js  c++  java
  • boostrap---btn

    bootstrap入门教程,按钮、按钮风格、下拉菜单等

    本教程演示:

    bootstrap框架的按钮、按钮大小、按钮风格、按钮组、下拉菜单制作等。

    使用的版本:Bootstrap v2.3.2 。

    下面是页面的截图:

    示例代码很简单,后面会贴出完整代码。

    这些东西很简单,就简单说几个要点吧:

    class='btn'  ,使用了btn这个class类名,bootstrap自动给给你加上按钮的样式;

    btn-small、btn-large等,可以控制按钮的大小;

    btn-primary  、btn-danger  、btn-warning等,可以改变按钮的样式风格,可以按需要去使用这些class。

    class='btn-group',这样就可以声明这是一个按钮组,一个分组的按钮,bootstrap会把第一个按钮、最好一个按钮圆角效果处理好,看起来会更美观。

    <span class='caret'></span>,这个就是上图的三角形图标元素。

    贴出全部代码:

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>bootstrap demo</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" charset="utf-8"/>

    <script type="text/javascript" charset="utf-8" src='js/jquery-1.9.1.min.js'></script>

    <script type="text/javascript" charset="utf-8" src='bootstrap/js/bootstrap.js'></script>

    </head>

    <body >

    <div class='container'>

    <br>

    <br>

    按钮、按钮大小、按钮风格<br>

    <div class=''>

    <a class='btn' href='javascript:;'>常规按钮</a>

    <a class='btn btn-small' href='javascript:;'>小按钮</a>

    <a class='btn btn-large' href='javascript:;'>主要按钮</a>

    <a class='btn btn-primary' href='javascript:;'>primary</a>

    <a class='btn btn-danger' href='javascript:;'>danger</a>

    <a class='btn btn-warning' href='javascript:;'>warning</a>

    <a class='btn btn-success' href='javascript:;'>success</a>

    <a class='btn btn-info' href='javascript:;'>info</a>

    <a class='btn btn-inverse' href='javascript:;'>inverse</a>

    </div>

    <br>

    按钮组<br>

    <div class='btn-group'>

    <a class='btn ' href='javascript:;'>按钮1</a>

    <a class='btn ' href='javascript:;'>按钮2</a>

    <a class='btn ' href='javascript:;'>按钮3</a>

    </div>

    <br>

    <br>

    <br>

    下拉菜单<br>

    <div class='btn-group'>

    <a class='btn'>按钮4</a>

    <a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:;'><span class='caret'></span></a>

    <ul class='dropdown-menu'>

    <li><a href='javascript:;'>item1</a></li>

    <li><a href='javascript:;'>item2</a></li>

    <li><a href='javascript:;'>item3</a></li>

    </ul>

    </div>

    </div>

    </body>

    </html>

  • 相关阅读:
    python获取前几天的时间
    协程
    python实现进制之间的转换
    爬虫学习博客
    python 将base64字符串还原为图片
    python进行md5加密
    初始Hibernate4
    Linux安装tomcat
    centOS7安装jdk
    centOS7安装mysql
  • 原文地址:https://www.cnblogs.com/KLYY/p/6489485.html
Copyright © 2011-2022 走看看