关闭

[学习笔记] bootstrap (三): 按钮,图片,图标

标签: bootstrap
745人阅读 评论(0) 收藏 举报
分类:

按钮

        <button class="btn btn-primary">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-success">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-info">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-warning">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-danger">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-link">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-lg">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-sm">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-xs">加入购物车</button>
        <br/>
        <br/>
        <button class="btn btn-block">加入购物车</button>
        <br/>
        <br/>
        <button class="btn active">加入购物车</button>
        <br/>
        <br/>
        <button class="btn disabled">加入购物车</button>

以上分别有,颜色(psiwd),按钮 模仿 链接 ,不同大小(lg,sm,xs),按钮状态(active,disabled)

图片

<img src="download.png" class="img-rounded">
<img src="download.png" class="img-circle">
<img src="download.png" class="img-thumbnail">

三个分别为:圆角风格,变成圆形,缩略图(准确说是个边框吧)

图标(glyphicon )

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

以上代码使用button标签构建一个按钮,按钮中文字为User,文字前有一个图标:用span加class构成的图标

同时可以配合其他样式构造更好看的图标(如改变大小,颜色,)

0
0
查看评论

Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------002(组件的使用)

这一节我们来介绍组件的使用。组件主要包括:图标,下拉菜单,按钮组,输入框,警告框,进度条,分页使用,徽章,巨幕等等。在我们说的上一节的全局CSS样式,我们只需要引入Bootstrap的css文件就可以了。但是在这个组件使用中,需要引入JQ和Bootstrap.js文件,因为组件有些需要JavaScr...
  • zhanghuiqi205
  • zhanghuiqi205
  • 2017-03-20 09:02
  • 1416

Bootstrap 教程第三课:制作有图标的按钮

Bootstrap所使用的是字体图标Glyphicons,这个字体包含200个图标。使用字体图标时需要注意几点: 1、每个图标字体都是有一个基类和相对应的图标类组成,如: 2、字体图标不能与其他元素共同存在,只能单独使用,使用时应创建span标签,并将基类和对应的图标类应用在...
  • kl28978113
  • kl28978113
  • 2016-06-20 16:46
  • 8859

Bootstrap风格的按钮 BButton(把图标做成字体,可以省下很多图片资源)

下载地址:https://github.com/mattlawer/BButton
  • wzq9706
  • wzq9706
  • 2014-05-09 15:49
  • 4142

js 购物车数量增减,总价格联动变化

前端JS实现购物车功能,点击商品加减按钮商品数量加减,点击单选按钮和全选按钮颜色变化,总价联动变化。项目中应用的都是bootstrap的样式,css就不一一贴出来了。 加函数,减函数,手动修改数量判断库存函数,总价格计算函数,单选事件,全选事件,一共分为6个事件 ...
  • tangtang5963
  • tangtang5963
  • 2016-04-29 17:46
  • 11696

仿京东购物车数量加减控件

  • 2017-05-05 20:01
  • 36KB
  • 下载

bootstrap图标菜单和按钮组件

图标菜单和按钮组件 图标菜单和按钮组件 下拉菜单 首页 咨询 ...
  • yangying496875002
  • yangying496875002
  • 2017-05-22 13:11
  • 272

Bootstrap 教程第四课:制作一组功能图标按钮

上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮(Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作。 我们以文档的居左、居中、居右和两端对齐按钮为例,首页在Glyphicon字体图标中,找到这四个图标的对应的...
  • kl28978113
  • kl28978113
  • 2016-06-20 16:50
  • 2901

bootstrap 学习笔记 - 4 (按钮 + 图片 + 辅助类)

Bootstrap学习 Bootstrap学习之 - 按钮 按钮的使用方式有如下四种: class="btn btn-default" href="#" role="button">Link c...
  • zhagener
  • zhagener
  • 2015-06-04 17:47
  • 5379

bootstrap搜索图标的使用

一个搜索表单 submit
  • u011175410
  • u011175410
  • 2014-05-06 15:30
  • 2299

Bootstrap之表格,按钮,表单和图片的样式

Bootstrap之表格,按钮,表单和图片的样式本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰富效果的。 一. 表格 基本格式<table class="table"&g...
  • ganyingxie123456
  • ganyingxie123456
  • 2017-05-06 23:11
  • 2083
    个人资料
    • 访问:27052次
    • 积分:774
    • 等级:
    • 排名:千里之外
    • 原创:50篇
    • 转载:2篇
    • 译文:0篇
    • 评论:16条
    最新评论