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

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会把第一个按钮、最好一个按钮圆角效果处理好,看起来会更美观。

,这个就是上图的三角形图标元素。

贴出全部代码:

bootstrap demo

按钮、按钮大小、按钮风格

常规按钮

小按钮

主要按钮

primary

danger

warning

success

info

inverse

按钮组

按钮1

按钮2

按钮3

下拉菜单

按钮4

  • item1
  • item2
  • item3
(0)

相关推荐

  • Bootstrap4如何设置下拉菜单

    今天武志伟小编分享一下Bootstrap4如何设置下拉菜单属性,做出漂亮的下拉菜单. 操作方法 01 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. .dropdown 类用来指定一个下拉菜单 ...

  • WPS表格怎么添加二级下拉菜单? WPS表格添加下拉菜单的教程

    wps中想要设计一个二级下拉菜单,该怎么制作二级下拉菜单呢?下面我们就来看看详细的教程. 1.首先,点击打开表格文件,输入需要设置为下拉列表的各项文字.选择菜单栏的公式,在属性栏点击 指定 按钮 2. ...

  • Word下拉菜单怎么设计? Word制作下拉菜单的教程

    Word中可以制作下拉菜单,该怎么设计下拉菜单呢?下面我们就来看看详细的教程. 1.打开Word,选择开发工具按钮 2.选择其中的下拉菜单按钮 3.即可在对应位置插入控件 4.选中控件,选择属性按钮 ...

  • ROM之家教你怎么自定义下拉菜单教程

    操作方法 01 这年头,甭管是苹果.安卓还是最新流出的WP8.1,没个通知栏下拉菜单都不好意思叫智能机.不过这下拉菜单也分三六九等,要论功能齐全还得是我大 安卓.况且我们安卓用户要的就是自由.能折腾, ...

  • excel下拉菜单怎么做,详细教程

    这里介绍创建Excel下拉菜单的4种快速方法 - 基于值列表,单元格区域,命名区域和动态下拉菜单,并且还提供了如何从另一个工作簿创建下拉菜单.Excel下拉菜单(又名下拉框或下拉列表)用于从预定义的项 ...

  • excel2013制作下拉菜单的教程

    excel2013打开要编辑的工作表,例子是一个班级名单,可以看到政治面貌目前还没有填写 接着我们找一个空白处,依次写入政治面貌的可能选项: 群众.共青团员.中共党员.民主党派 然后选中"政 ...

  • excel二级联动下拉菜单教程

    搜狗指南里有不少分享,但是感觉都不够简单明了.特制作此Excel中制作联动的二级下拉菜单教程. 操作方法 01 1.以省市为例,第一步将省市名称列好,建议单独成一个sheet. 02 2.在名称管理器 ...

  • excel下拉菜单怎么做 excel2010表格制作下拉菜单教程图解

    excel 每个功能都非常实用,今天我教大家怎么做“excel下拉菜单”,给大家展示带使用下拉菜单中的选项,使关联单元格中的数据发生对应的变化的小功能。 制作步骤如下: 第一步:打开excel2010 ...

  • excel2013下拉菜单怎么做 excel2013/2007下拉菜单制作详细教程

    在工作中,我们在应用excel的时候,有时需要用户从特定数据中选择,而不是自己填写,这一方面有利于数据的准确性,一方面有利于用户输入的快捷.比如在选择性别的时候,提供一个下拉菜单,里面是男和女,那么怎 ...