bootstap的初体验-04组件

最新推荐文章于 2025-05-12 14:04:15 发布
原创 最新推荐文章于 2025-05-12 14:04:15 发布 · 228 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap

本文介绍了Bootstrap框架中两个引人注目的组件：徽章和巨幕。徽章组件常用于显示数字或状态，而巨幕组件则用于创建视觉冲击力强的大型背景图片或视频展示区域，两者都是网页设计中提升用户体验的有效工具。

bootstrap提供了丰富的组件，深入进去看，真实让人眼花缭乱。让我映印象刻的有两个组件。一个是徽章一个是巨幕。

徽章

原来我以前看到的这种带数字的按钮状的叫徽章。还有这种列表式的徽章

巨幕

以前看到类似这种页面，以为是排版很好的页面，没想到这个也可以用组件做，效果真的很不错，我喜欢。

（全文完）

参考资料：

https://v3.bootcss.com/components/

html的小图标组件,JS组件系列之Bootstrap Icon图标选择组件
weixin_39630813的博客
06-03 834
前言：最近好多朋友在群里面聊到bootstrap icon图标的问题，比如最常见的菜单管理，每个菜单肯定需要一个对应的菜单图标，要是有一个可视化的图标选择组件就好了，最好是直接选择图标，就能得到对应的class样式。于是乎各种百度，皇天不负有心人，最后被博主找到了，感觉效果还不错，并且支持自定义的图标，今天就拿出来分享下，绝对的干货哦！一、Bootstrap icon picker组件这个组件是在...
vue显示二维码
maxdaic的专栏
03-24 1110
今天用vue测试一下二维码的生成效果。在网上找了qrcodejs2好像挺容易上手的，但实际上我按照网友的步骤，结果根本无法显示二维码。 提示的错误就是qrcodejs2的源代码问题。当然也可能是什么模块版本的问题，blabla，反正就是让人搞得很烦。 我只想安安静静地显示一个二维码，今天下午却搞了好久的模块版本兼容性问题。 最后我采用了vue-qr这个工具，上手也很容易，官方文档如下 https://www.npmjs.com/package/vue-qr 下面是我的源代码 <te.
bootstrapTable行内编辑----X-editable组件
PORSCHE_GT3RS的博客
08-02 3219
阅读目录一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案1、文本框2、时间选择框3、下拉框4、复选框5、“阴魂不散”的select2 四、总结  正文 前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研
BootStrap初体验
javascript_good的博客
07-20 265
在项目根目录下创建一个static的目录，里面存放静态文件，静态文件分为css,自己定义的css样式，img 存放图片，plugins放一些插件，比如这里把bootstrap下载后放到这里面。下载用于生产环境的Bootstrp,下载后是一个bootstrap-3.4.1-dist.zip的zip包，解压后放到项目中。开发版本和生产版本只是生产版本经过压缩的，我们在开发的时候就只要引入开发版本就行。用模板导航条是圆角，如果想要自己改成非圆角，就可以自己加上样式。这个是v3版本，也可以选择更高的版本。
Bootstrap的初体验-1
04-02 123
　　这两年来基本上一直在写APP的接口，偶尔开发一下后台新增的功能模块，对于前端基本上属于可以调试出来想要的效果但就是不能写的手残。这次机缘巧合，当需求来了之后，看到要适配手机版，撸起袖子就想起了Bootstrap这个一直备受推崇的前端框架。 　　之所以记录在博客里面，是因为我的服务器经常忘记密码、忘记续费域名等后知后觉让人心情不爽的事情，干脆还是用博客代替吧。 　　学习前提： 　...
bootstrap table 以及行内编辑x-editable组件的使用
weixin_42590334的博客
06-25 1886
一、x-editable组件介绍 x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图： 来源链接：http://vitalets.github.io/x-editable/ 这里肯定是选用第一种喽。首先还是给出开源地址吧。 x-editable开源地址：https://github.com/vita...
搭建React与Bootstrap初体验
weixin_35006125的博客
05-12 379
本篇博客文章从零开始，指导读者如何搭建React和Bootstrap的开发环境。内容包括创建基本的文件夹结构、安装ReactJS和Bootstrap框架，以及如何在项目中包含编译器和字体文件。通过逐步介绍，文章展示了如何使用ReactDOM.render()方法和JSX语法编写React应用程序，并最终创建了一个静态登录表单，应用了Bootstrap的响应式设计，从而为开发响应式且以移动设备为先的Web应用打下了基础。
jquery颜色选择器--------Bootstrap Colorpicker 初体验
a1669000102的博客
09-03 1万+
Bootstrap Colorpicker是一款基于Bootstrap的jquery颜色选择器插件。 所以，在页面中引入bootstrap，jquery和bootstrap-colorpicker.css以及bootstrap-colorpicker.js文件。 &amp;lt;link href=&quot;../css/bootstrap.min.css&quot; type=&quot;text/css&quot; rel...
很不错的两款Bootstrap Icon图标选择组件
飞奔的小土豆@1024
02-25 8733
这篇文章主要介绍了不容错过的两款Bootstrap Icon图标选择组件，支持自定义的图标，拿出来分享下，绝对的干货，感兴趣的小伙伴们可以参考一下 一、Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的，初初看上去，确实是很不错的，并且是基于bootstrap风格的，所以更加适合使用bootstrap风格布局的项目。既然是github上
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
热门推荐
菜鸟笔记
12-29 2万+
阅读目录 一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案 1、文本框2、时间选择框3、下拉框4、复选框5、“阴魂不散”的select2 四、总结   正文 前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近
bootstap的初体验-05选项卡组件的使用
maxdaic的专栏
06-12 222
选项卡是一个比较常见的组件，在很多网站都有使用。学了一下，感觉东西有点多。 选项卡从界面上讲分为两个部分，上面的是选项卡，下面的是面板。选项卡部分用ul和li定义，而面板部分用div定义。如下代码所示： <!-- 这是选项卡 --> <ul class="nav nav-tabs"> <li><a href="#pan1" data-toggle="tab">博客</a></li> <li><a href
BootStrap模板--Ace admin--1.3
11-07
Bootstrap模板Ace admin 1.3是一款基于流行的前端框架Bootstrap构建的高级管理界面模板。这款模板专为Web应用程序设计，提供了一系列美观、响应式且功能丰富的组件，帮助开发者快速搭建后台管理系统。下面将详细介绍...
zibbs开源php轻论坛，Bootstrap论坛-PHP资源
最新发布
10-17
Bootstrap作为一款流行的前端框架，以其响应式设计和丰富的用户界面组件库著称，极大地降低了Web开发的门槛，提高了开发效率。当Bootstrap应用于轻论坛的设计中时，使得论坛页面不仅在各种设备上均能保持一致的视觉...
bootstrap--framemark 整合
09-10
Bootstrap 是一个流行的前端开发框架，而 FrameMarker 则可能是一个特定的页面布局或组件库。在这个整合项目中，开发者尝试将两者结合起来，为用户提供一个更方便的开发环境。下面将详细探讨这两个技术以及它们的...
bootstrap与element-ui
01-09
Bootstrap 自诞生之初就被赋予了跨平台适配的任务，因此对于移动优先策略的支持尤为出色；相反地，虽然 Element UI 同样具备良好的响应能力，但其主要应用场景还是集中在 PC 端办公软件领域内。 #### 使用案例分析 ...
如何动态修改网页元素的属性？
maxdaic的专栏
04-14 1703
最近遇到一个需求，需要动态修改网页某个元素的属性，具体来说就是灰度值。我用的是uniapp这个框架，一开始我使用百度搜“js 控制style里的数值大小”，然后找到下面这样的解决方案： document.getElementById("resume").style.filter="grayscale(100%)" 但奇怪的是，这个方案在hbuilder的内置浏览器里运行的好好的，一旦运行在真实的手机上，就会报错，错误如下： Cannot read property 'getElementById
自己动手写个人网站——01准备前端框架
maxdaic的专栏
06-13 439
准备前端框架的过程就像上购物网站一样。看见好多东西，都想要，但仔细想想并不适合我。 网上有很多免费的模板，免费的图片。我浏览了很多，都发现不是很理想。比如图片太大了，这会导致网页加载慢。比如图片画的不符合我的构想的布局，大多数图片都把重要的元素放在图片的中央，而我写的网页刚好不是那样的，我设计的网页是中间是文章或者视频等主要的内容，而网页的四周再点缀一些好看的图片就行了。但我终究没有找到让自己满意的图片。最后实在累得不行就放弃了。 到这里，我突然很想要一个UI设计师，帮我设计一款清爽的网页背景图片。
bootstap的初体验-02自适应的行和列
maxdaic的专栏
06-11 327
bootstrap的核心理念就是响应式设计。 这个响应式设计有点抽象，望文却生不了义。 什么叫响应式设计？ 就是一套源代码能够自适应各种不同分辨率的屏幕，如智能手机，平板，PC。 因为要做到自适应各种分辨率的屏幕，所以bootstrap要做： 自适应的布局 自适应的图片 自适应的脚本 现在先来看看bootstrap怎么做到自适应的布局。这要归功于bootstrap的栅格系统。 什么是栅格系统？ 栅格系统就是bootstrap自定义的行和列，利用这套行和列就能自适应于各种屏幕。 栅格系统
自己动手写个人网站——03增加游戏
maxdaic的专栏
06-13 315
因为我之前有段时间开发过一个网页版的简易的德州扑克的游戏。 这个游戏的是一个网友开源的。而我当时刚好在学习golang，加上自己也喜欢打德州扑克，就研究了一下。 我发现那个作者的代码根本无法运行，有好几个bug没有修复。 本着拿来主义好羞耻，就不要再去麻烦作者的心里，我开始自己修复那个游戏。 我看作者已经完成了大部分的功能，对我来说最麻烦的扑克牌素材之类的，作者都已经准备好了，我觉得应该没什么太大的问题了。我觉得修复一些bug应该不在话下。当时我经过几天时间的修复，还真的搞定了，可以玩了。 我的可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值