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>

boostrap---btn的更多相关文章

  1. 【转】Validate + Boostrap tooltip 表单验证示例

    一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0  jquery.validate.min.j ...

  2. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  3. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

  4. 关于boostrap的modal隐藏问题（前端框架）

    Modal(模态框) 首先,外引boostrap和Jquery的文件环境: <link rel="stylesheet" href="https://cdn.sta ...

  5. Boostrap模态框，以及通过jquery绑定td的值，使模态框回显

    做页面不管是登录或是修改信息,难免会使用到模态框,在此分享一个比较漂亮的模态框 Boostrap模态框 使用之前首先导入jquery-3.2.1.min.js,和bootstrap.min.js 先添 ...

  6. 在ASP.NET MVC中使用Boostrap实现产品的展示、查询、排序、分页

    在产品展示中,通常涉及产品的展示方式.查询.排序.分页,本篇就在ASP.NET MVC下,使用Boostrap来实现. 源码放在了GitHub: https://github.com/darrenji ...

  7. Angular2使用boostrap和ng-bootstrap总结

    Angular2使用bootstrap有几种方式,本文主要介绍两种方式进行Boostrap样式的使用: 一.直接通过静态文件的方式进行引入: 通过命令新建一个Bootstrap的工程 ng new B ...

  8. 快速搭建vue2.0+boostrap项目

    一.Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...

  9. Boostrap bootstrap-table插件使用教程

    bootstrap table 简介及特性 简介 Bootstrap table 是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序 ...

  10. Boostrap入门(一)

    1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...

随机推荐

  1. 浅解.Net分布式锁的实现

    序言 我晚上有在公司多呆会儿的习惯,所以很多晚上我都是最后一个离开公司的.当然也有一些同事,跟我一样喜欢在公司多搞会儿.这篇文章就要从,去年年末一个多搞会的晚上说起,那是一个夜黑风高的晚上,公司应该没 ...

  2. 第六篇 项目疑问 ------- BaseService<T> where T : class, new() 含义

    public abstract class BaseService<T> where T : class, new() { //当前仓储 //DbSession的存放 //为了职责单一的原 ...

  3. Handlebars模板引擎之进阶

    取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...

  4. 3月题外：关于GeoServer和OpenLayers3实用开源插件或组件的总结

    Geoserver篇 注意: 1)用法 GeoServer-Extension的使用方法:将jar包直接放入部署在tomcat上的geoserver/WEB-INF/lib文件夹中 2)在安装插件时, ...

  5. Java工程师：四个月小白变大咖，你能做到吗？

    你眼中的Java工程师是什么样子? 技术大牛?闷骚男?IT民工?没有女朋友?全是汉子?很邋遢?贼眉鼠眼? 今天,中软国际卓越工程师,Java精英班正式开课啦.你想看看他们都是一群怎样的人吗? 今天的武 ...

  6. synchronized和lock比对

    前言:在上面的博客说了synchronized的一些用法,下面我们再来看看lock,这个出现频率也是非常高的一个. 1:获取Lock锁的几种方式 前面说了synchronized有锁对象和锁类对象,当 ...

  7. npm学习总结

    1.npm run [scripts name]的作用及意义: npm 局部安装的工具包不能像全局安装那样直接执行命令行,但可写成命令行执行语句,通过npm run来运行,该命令可将node_modu ...

  8. oracle目录操作

    1.创建目录 create directory dir_name as 'dir_path'  (dir_path必须事先手动创建) 2.授权 grant read,write on director ...

  9. 类似于qq空间类型的评论和回复

    最近学习thinkphp,做了一个博客系统,其中感觉实现一个类似于qq空间的评论和回复功能比较复杂,所以把这次的经历记录下来,与大家共勉,具体的方法就不说了,在这里分享一下思路. 目标就是这种,关键是 ...

  10. 2431: [HAOI2009]逆序对数列

    2431: [HAOI2009]逆序对数列 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 954  Solved: 548[Submit][Status ...