bootstrap 导航,情境,字体图标

简介: 控件禁用 以button控件为例,下面两句都可以。效果为控件变灰,hover状态下鼠标指针变为禁止标志。 <button type="button" disabled="disabled">i'm a button</button><button type="button" disabled=>i'm another button</bu

控件禁用

以button控件为例,下面两句都可以。效果为控件变灰,hover状态下鼠标指针变为禁止标志。

<button type="button" disabled="disabled">i'm a button</button>
<button type="button" disabled=>i'm another button</button>


情境

有success,info,warning,dnager四个等级,主要用来改变控件外观颜色,依次是绿色,蓝色,。可以用在按钮(btn-XX)上,仪表盘(panel-XX)上等。

导航

导航可以做成响应式的,见图1 与图2.


图1 小屏幕显示效果


图2 大屏幕显示效果


字体图标

glyph,[glɪf], n. 字形。
icon,['aɪkɒn],n.图标
把符号当做字体来看待。父级元素设置css属性中的font-size即可改变图案大小。

<span class="glyphicon glyphicon-question-sign"></span><!--这个是问号-->
<span class="glyphicon glyphicon-plus"></span><!--这个是加号,以此类推-->

目录
相关文章
|
前端开发
Bootstrap 字体图标
Bootstrap 字体图标
69 0
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
7天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状,使界面更加美观。通过添加 `.nav-justified` 类,可以使导航项等宽对齐,适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航,而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。
Bootstrap5 导航2
导航对齐方式:使用 `.justify-content-center` 类可使导航居中显示,使用 `.justify-content-end` 类可使导航右对齐。垂直导航:使用 `.flex-column` 类可创建垂直导航。
Bootstrap5 导航1
Bootstrap5 导航简介:使用 .nav 类创建水平导航栏,.nav-item 类应用于每个列表项,.nav-link 类用于每个链接。示例代码展示了如何实现这一功能,包括禁用状态的链接。
|
5月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
81 1
|
前端开发 JavaScript 容器
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航