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>

<title>bootstrap demo</title>

</head>

<body >

<br>

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

<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-inverse' href='javascript:;'>inverse</a>

</div>

<br>

按钮组<br>

</div>

<br>

下拉菜单<br>

</ul>

</div>

</body>

</html>

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

【转】Validate + Boostrap tooltip 表单验证示例
一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0 jquery.validate.min.j ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
vue.js+boostrap
vue.js+boostrap最佳实践一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...
关于boostrap的modal隐藏问题（前端框架）
Modal(模态框) 首先,外引boostrap和Jquery的文件环境: <link rel="stylesheet" href="https://cdn.sta ...
Boostrap模态框，以及通过jquery绑定td的值，使模态框回显
做页面不管是登录或是修改信息,难免会使用到模态框,在此分享一个比较漂亮的模态框 Boostrap模态框使用之前首先导入jquery-3.2.1.min.js,和bootstrap.min.js 先添 ...
在ASP.NET MVC中使用Boostrap实现产品的展示、查询、排序、分页
在产品展示中,通常涉及产品的展示方式.查询.排序.分页,本篇就在ASP.NET MVC下,使用Boostrap来实现. 源码放在了GitHub: https://github.com/darrenji ...
Angular2使用boostrap和ng-bootstrap总结
Angular2使用bootstrap有几种方式,本文主要介绍两种方式进行Boostrap样式的使用: 一.直接通过静态文件的方式进行引入: 通过命令新建一个Bootstrap的工程 ng new B ...
快速搭建vue2.0+boostrap项目
一.Vue CLI初始化Vue项目全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...
Boostrap bootstrap-table插件使用教程
bootstrap table 简介及特性简介 Bootstrap table 是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序 ...
Boostrap入门(一)
1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...

随机推荐

Windows内存管理简介：
1:连续的内存空间分配: (1)单一连续分配:只能单作业,单任务运行: 分为系统和用户区:用户区是指除了系统需外左右的内存,由于单用户,单任务,要不都被占用,要不全空 (2):固定空间分配:固定分 ...
web前端学习路线推荐（讲的很细致）
前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色. CSS是样式层,它的目的是表示一块 ...
【PHP系列】PHP推荐标准之PSR-4，自动加载器策略
接上回的继续说,上回说到PSR-3日志记录器接口,这回我们来说说PSR的最后一个标准,PSR-4,自动加载器策略. 缘由自动加载器策略是指,在运行时按需查找PHP类.接口或性状,并将其载入PHP解释 ...
《C#语言和数据库技术基础》单词必备
<C#语言和数据库技术基础> 第一章1．.NET Framework 框架2．sharp 尖锐,强烈的3．application 应用程序4．devel ...
史上最全的AJAX
概述对于web应用程序:用户浏览器发送请求.服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML),渲染并显示浏览器上· Ajax和Form表单提交数据的的好 ...
LSTM模型与前向反向传播算法
在循环神经网络(RNN)模型与前向反向传播算法中,我们总结了对RNN模型做了总结.由于RNN也有梯度消失的问题,因此很难处理长序列的数据,大牛们对RNN做了改进,得到了RNN的特例LSTM(Long ...
Spark性能调优之代码方面的优化
Spark性能调优之代码方面的优化 1.避免创建重复的RDD 对性能没有问题,但会造成代码混乱 2.尽可能复用同一个RDD,减少产生RDD的个数 3.对多次使用的RDD进行持久化(ca ...
初次接触java中的递归算法
一道关于兔子繁衍的编程题: 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 自己考虑了挺久,思路出现了问题,甚至连 ...
1734: [Usaco2005 feb]Aggressive cows 愤怒的牛
1734: [Usaco2005 feb]Aggressive cows 愤怒的牛 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 217 Solved: ...
SQL-ROW_NUMBER() OVER函数的基本用法(源码案例)
SELECT SUM(t.AdjustedBalance) AS Allqmye FROM ( SELECT * FROM ( SELECT ROW_NUMBER() OVER ( PARTITION ...

boostrap---btn

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

随机推荐

热门专题