Twitter Bootstrap 单选框/复选框 - 如何放置字形图标

2024-04-07

使用 TB,是否可以设置单选按钮或复选框的样式,使其显示字形而不是单选按钮或复选框的默认样式?我想用一个glyphicon glyphicon-star表示未选中,然后glyphicon glyphicon-star-empty来表示已检查。


没有 javascript,你可以修改样式...在我看来,这有点像黑客,但很有趣,因为我意识到 boostrap 使用图标字体#newb。

HTML

<input type="checkbox" class="glyphicon glyphicon-star-empty" >

CSS

.glyphicon:before {
     visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
    content: "\e006";
}
input[type=checkbox].glyphicon{
     visibility: hidden;        
}

试试看HERE http://jsfiddle.net/t7gAR/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Twitter Bootstrap 单选框/复选框 - 如何放置字形图标 的相关文章

  • Chrome:网络元素自动移动

    我正在开发一个网络项目 在过去的两周里 我正在进行学期考试 所以我要休息一下 现在 既然他们已经结束了 我又继续我的工作了 但我发现我的一些Web 元素 如按钮 span 在 Chrome 上移动了一些像素 在 IE 和 Mozilla 上
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 在具有不同边框的 div 上调用函数

    我有一个div对于一个名为 ball 的类 div 的每个边缘都有一个边框 顶部边框 左侧边框等 当用户单击每个边框上的边框时 我想用 JavaScript 触发不同的事件 例如 用户点击边框顶部console log top 等等 HMT
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 如何对多行文本中的每一行应用填充?

    我已将背景颜色应用于 span 标签 也有左和右padding设置在它上面 问题是 padding仅适用于左侧 开始 和右侧 结束 span 而不是当文本换行时每行的左侧 开始 和右侧 结束 我该如何应用左和右padding to the
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 简单的html css块结构,不能对内容div使用-headerHeight底部边距来避免滚动条吗?

    以下是我的简单 html css 结构
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 如何仅在 css/html 中强制在单词之间换行?

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714

随机推荐

  • quartz 默认线程数是多少

    我是新来的Quartz 我确实设法弄清楚调度程序配置的默认值是org quartz threadPool threadCount 1 但它没有在任何地方找到这意味着什么 这是否意味着只有一个线程或者有其他 数字 我正在使用quartz sc
  • 如何使用蓝图将 Flasgger 与 Flask 应用程序结合使用?

    我正在使用以下命令将 Swagger UI 添加到我的 Python Flask 应用程序中Flasgger https github com rochacbruno flasgger 互联网上最常见的示例是使用基本 Flask 风格 ap
  • 使用 VS2017 启动 asp.net core 应用程序会创建新的应用程序池

    每次当我在 VS2017 的本地 IIS 下启动 ASP net Core 应用程序的调试器时 都会创建一个新的应用程序池 我希望应用程序在 DefaultAppPool 身份 下保持稳定 而不是创建新的应用程序 这个设置在哪里会影响这个
  • Laravel 查询带有“if”条件?

    我正在尝试使用 Laravel 4 制作高级搜索表单 这是查询 result DB table users ads gt join ads users ads ad id ads id gt orderBy column method gt
  • JavaScript 通过引用与通过值 [重复]

    这个问题在这里已经有答案了 我正在寻找一些很好的综合阅读材料 了解 JavaScript 何时按值传递内容 何时通过引用传递内容 何时修改传递的项目影响函数外部的值以及何时不影响函数外部的值 我还感兴趣的是 何时通过引用与通过值分配给另一个
  • 相邻弹性盒容器中的内容垂直对齐

    我有多个项目说卡片 这些卡片需要水平堆叠 并且高度需要相同 这正在发生在我身上 每张卡片都有图像 文本和按钮 每张卡片的图像和文本应采用任何卡片的最大高度 以便它们正确对齐 这不会发生在我身上 如果图像和文本正确对齐 则按钮将始终在底部的每
  • Firestore安全规则:在文档的数组中搜索用户的ID

    首先 对不起我糟糕的英语 这不是我的母语 我正在 Firebase 中使用 Firestore 数据库构建一个简单的应用程序 在我的应用程序中 用户是小组的成员 他们可以访问其他用户的数据 为了不查询太多文档 每个用户一个 在组文档的子集合
  • 循环 AVMutableCompositionTrack

    我身上有两个音轨 我将它们相互组合起来 如下所示 AVMutableComposition composition AVMutableComposition alloc init AVMutableCompositionTrack comp
  • Python 获取系统环境变量 Linux

    我已经暴露了一个系统环境变量KEY1有价值VALUE1 in etc profile 我知道 我知道 这可能很糟糕 如果我现在在我的壳里 echo KEY1 VALUE1 但当我这样做时 python c import os print o
  • Rails 是否有“未经授权”的例外情况?

    我正在编写一个应用程序 它使用普通的旧 Ruby 对象 PORO 从控制器中抽象出授权逻辑 目前 我有一个名为的自定义异常类NotAuthorized that I rescue from在控制器级别 但我很想知道 Rails 4 是否已经
  • 在 irb 中导航命令行的键盘快捷键

    我看过用户运行 irb 的截屏视频 当他们编写文本时 他们会跳转到行的开头 结尾以及单词的开头 结尾 用于执行此操作的击键是什么 这取决于所使用的外壳吗 Ctrl A gt Move to beginning of line Ctrl E
  • 同一解决方案中的 NuGet 引用

    以前可能已经问过这个问题 如果是 请提供链接 我正在为我的公司开发一套 核心 解决方案 我们在此解决方案集中有几个不同的项目 每个项目在构建时都会变成一个 NuGet 包 以便在我们的其他解决方案项目中使用 我发现我想通过 NuGet 引用
  • Swift Firebase Storage 如何检索名称未知(NSUUID)的图像

    我正在制作一个函数来检索 url 作为用户图像 然而 我的上传图像名称功能是由NSUUID创建的 因此 我不知道每个用户个人资料图片的名称是什么 如何改进我的代码以获得每个用户的用户 imgae 而不是硬编码 img 名称 func get
  • RStudio 通常在空白屏幕中启动;需要 sudo 才能工作

    在新安装的 x64 Ubuntu GNOME 16 04 和 R v3 3 2 上运行的 RStudio v1 0 136 在空白屏幕中启动 终端输出如下 参见屏幕截图 TypeError undefined is not an objec
  • Pydoc 没有看到文档字符串?

    显然我在这里错过了一些严重的事情 这是我的测试程序 Doc and nothing but doc class TestMe object class documentation goes here def testFunc self Fu
  • 应忽略听到“元素‘行为’具有无效子元素”,但因此阻止更新服务引用[重复]

    这个问题在这里已经有答案了 可能的重复 元素 behavior 在 wcf app config 中具有无效的子元素 myFaultExtension https stackoverflow com questions 4677377 th
  • 如何为 Material UI React 添加 RTL 支持

    我正在构建一个 LTR 应用程序 并且想添加 RTL 支持 该应用程序基于 Material UI React 之上 由于我使用的是 CSS Flex Box 因此我能够将应用程序旋转到 RTL 只需将 dir rtl 添加到主体即可 我还
  • 如何从这个字符串中解析出时间戳?

    我有这个示例字符串 Sample string 1 A 1 1 B 1 I 2 f 0 p 1 d 2010 07 21T08 52 05 222ZKHBDGSLKHFBDSLKFGNIF XLGCREWIGMEWCERG Sample s
  • 苹果推送通知服务统计(apns)

    是否可以找到相关信息Apple Push Notification服务使用情况 有多少人正在使用它们 有多少人正在拒绝它们 或者也许 有人已经掌握了此类信息 苹果没有提供大量关于有多少用户实际接受 拒绝推送通知的信息 但您可以通过比较总安装
  • Twitter Bootstrap 单选框/复选框 - 如何放置字形图标

    使用 TB 是否可以设置单选按钮或复选框的样式 使其显示字形而不是单选按钮或复选框的默认样式 我想用一个glyphicon glyphicon star表示未选中 然后glyphicon glyphicon star empty来表示已检查