Bootstrap的导航元素和Well详解【前端Bootstrap框架】

简介: Bootstrap的导航元素和Well详解【前端Bootstrap框架】

)

Well

Well是一种容器,可以引起内容抑制显示或插图效果。要创建一口井,只需将内容放入class.well的<div>。演示:

<div class="well">黎燃</div>

在这里插入图片描述
大小:可以使用可选类别well LG或well SM来更改井的大小。这两个类与一起使用。。这两个类将影响填充。根据使用的类别,well将显示得更大或更小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - Well 的尺寸大小</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="well well-lg">黎燃</div>
<div class="well well-sm">黎燃</div>

</body>
</html>

这两个类将影响填充。根据使用的类别,well将显示得更大或更小运行结果如下:
在这里插入图片描述

导航元素

表格导航或标签
创建选项卡式导航菜单:
从class.Nav的无序列表开始。
添加类。导航选项卡。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

导航元素运行结果如下:
在这里插入图片描述
胶囊导航菜单
基本胶囊导航菜单
如果需要将标签更改为胶囊样式,则只需要使用类。Nav药片代替。导航标签,其他步骤同上。
基本的胶囊式导航菜单如图:
在这里插入图片描述
对齐导航
可以使用。导航标签或。导航药丸使用类。同时调整导航,使选项卡式或胶囊式导航菜单与父元素一样宽。在较小的屏幕上,导航链接堆叠在一起。
在这里插入图片描述
禁用链接
对于每个。导航类,如果添加了.Disabled类,将创建一个灰色链接,并且链接的:悬停状态将被禁用,如以下示例所示:

<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li class="disabled"><a href="#">iOS(禁用链接)</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li  class="disabled"><a href="#">VB.Net(禁用链接)</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

禁用链接运行结果如下:
在这里插入图片描述

相关文章
|
6天前
|
编解码 前端开发 JavaScript
前端框架与库 - Bootstrap响应式设计
【7月更文挑战第19天】Bootstrap是流行的前端框架,以其响应式设计和组件库闻名。响应式设计确保网站在不同设备上显示良好。关键包括:**网格系统**,基于12列布局,适应屏幕尺寸;和**媒体查询**,用于根据设备特性应用样式。开发者常遇到的问题有:网格列超过12、忽视断点和自定义样式冲突。解决方法涉及正确使用断点类、测试多设备及清晰注释代码。借助官方文档和实践,可有效掌握响应式设计。
|
23天前
|
前端开发
前端 CSS 经典:元素倒影
前端 CSS 经典:元素倒影
10 1
|
1月前
|
前端开发 JavaScript CDN
【干货】通过Bootstrap框架添加下拉框到导航栏
【干货】通过Bootstrap框架添加下拉框到导航栏
24 1
|
1月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
19 1
|
23天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
19 0
|
2月前
|
前端开发
|
2月前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
2月前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
|
2月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
|
2月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航

热门文章

最新文章