bootstrap的用法、bootstrap图标

正文

前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式。于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦!

一、Bootstrap icon picker组件

这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的,所以更加适合使用bootstrap风格布局的项目。既然是github上面的,毋庸置疑,这是一个开源组件,源码地址。好了,说了这么多,一起来看看它到底长啥样子吧。

1、组件效果预览

2、组件代码示例

原文地址:https://www.cnblogs.com/yyn120804/p/10107446.html

时间: 2024-11-09 01:58:05

bootstrap的用法、bootstrap图标的相关文章

Bootstrap<基础十一>字体图标(Glyphicons)

字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构.在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphi

Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dropdown-toggle').click(function(e) { e.preventDefault(); e.stopPropagation(); return false; }); Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

bootstrap基本用法

进入中文官网:http://www.bootcss.com 开始第一个Demo 准备工作: (1)进入bootstrap中文官网,点击起步 (2)下载生产环境 下载好的文件是一个压缩文件,学习时建议使用未压缩版本,项目开发时必须使用压缩版本. (3)找到基本模板,将其复制粘贴进来,当然,必要时需要按需求进行更改. 学习bootstrap首先需要理解的是栅格系统,看官网(http://v3.bootcss.com/css/#grid-intro)给的定义: 我们需要理解的是col-xs- .col

Bootstrap 基本用法

使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href="../css/bootstrap.min.css">; 2.引用bootstrap的js框架,这样可以使用; 注意:因为bootstrap的js框架是基于jquery而写的,因此要引用bootstrap的js框架的时候必须先引入jquery,这样才能使用bootstrap的框架: &

Bootstrap 基本用法(续)

在bootstrap中有很多的组件,这些组件可以帮组我们更快的写出一些好看的样式,下面就是一些样式: 导航框: <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> &

Bootstrap栅格系统用法--Bootstrap基础

1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同设备 超小屏幕 手机(<768px)               类的前缀:-col-xs- 小屏幕 平板(>=768px<992px)   类的前缀:-col-sm- 中等屏幕 桌面显示器(>=992px<1200px)类的前缀:-col-md- 大屏幕 大桌面显示器(>

BootStrap自带的图标

https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp 原文地址:https://www.cnblogs.com/chucklu/p/8674771.html

Bootstrap中的字体图标

使用 <span class="glyphicon glyphicon-th-large"> XX文字</span>引入字体图标.一般情况下文字放在span 标签之间,前面加一个空格,获得图标与文字之间的间距. 也可以将文字放在span标签之后. span标签经常出现在链接中,如将文字放在在span 标签之间,不会出现超链接下划线,如字体图标前面有空格,间距大,也可以将文字放在span标签之后会出现下划线.如前面有空格,间距小. <div class=&q

bootstrap中可用的图标集