bootstrap-自适应导航

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>自适应导航</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body><ul class="nav nav-tabs nav-justified"><li class="active"><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

转载于:https://blog.51cto.com/suyanzhu/1929066

bootstrap-自适应导航相关推荐

bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
最新ThinkPHP开发的简约自适应导航网站源码
正文: ThinkPHP开发的简约自适应导航网站源码下载,使用 thinkphp+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网 ...
Bootstrap~多级导航（级联导航）的实现
在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下插件地址:http://vsn4ik ...
Bootstrap 分页导航中的翻页组件
分页导航中的翻页一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页导航. Bootstrap中,只需为列表 ...
Bootstrap 分页导航的对齐方式
分页导航的对齐方式分页导航中,默认采用左对齐.如果希望页码居中对齐,就给 .pagination 的 <div> 追加 .pagination-centered 类,希望页码右对齐,就给 ...
Bootstrap 标签导航的布局
默认情况下,标签的位于顶部.为了灵活控制标签的位置,Bootstrap额外提供了 3 个类,分别是 .tabs-left..tabs-right..tabs-below,它们分别让标签位于左侧.右侧. ...
Bootstrap 禁用导航链接
在导航组件中,包括标签导航.胶囊式导航.导航列表,为某个 <li> 元素添加 .disabled 类,可以让链接变灰并失去鼠标悬停效果.如: <ul class="nav ...
bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏
<!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐 ...
html自适应导航栏怎么写,网站简单兼容简洁的自适应导航栏代码
大家在网上经常看到很多网站都是用自适应的网站的导航栏,包括我们高网也是. 小高百度了一下,折磨出这么一个方法然后将代码分享给大家. 原理很简单,利用css的media,进行限制,在手机版访问的时候将导 ...
Bootstrap后台导航
Bootstrap后台导航 1.新建一个web项目admin,首先要把bootstrap这些库给导进来. 2.打开bootstrap中文网站,找到文档.点击起步里面有一个模版,把这个模版直接复制到我们 ...

bootstrap-自适应导航

1.运行效果如图所示

2.实现代码如下

bootstrap-自适应导航相关推荐

最新文章

热门文章