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"><li><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>

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1929053

bootstrap-导航（基础样式）相关推荐

修改bootstrap导航栏样式(颜色，高)
提示:记录bootstrap导航栏样式(颜色,高)的修改文章目录前言一.bootstrap导航栏样式 (颜色,高) 的修改前言在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
Bootstrap—基础样式定义
本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果. Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样 ...
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
对Bootstrap的css基础样式进行总结归纳
概览这篇博文是对bootstrap官方文档的总结,为什么我要对它进行总结呢?哈哈,有两个原因,第一,我想复习一下bootstrap框架的知识,第二,我有点不适应官方文档说的繁琐,冗余.我想自己做一份 ...
bootstrap框架基础使用
bootstrap框架基础使用 bootstrap简介 bootstrap引入和使用网络引用本地引用 bootstrap基础 bootstrap组成 bootstrap组件 bootstrap简介 ...
Bootstrap导航条学习使用(一)
本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下 navbar: 导航条的基础样式 nav navbar-nav :导航条里菜单的的固定样式组合的class navba ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
bootstrap之navbar样式
一.前言现在开始介绍bootstrap的导航条(navbar)样式. 二.源码 1.navbar.less 1.1.navbar.less源码 //// Navbars// ------------ ...
Bootstrap（基础）
bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.c ...

bootstrap-导航（基础样式）

1.运行效果如图所示

2.实现代码如下

bootstrap-导航（基础样式）相关推荐

最新文章

热门文章