Bootstrap系列 -- 38. 基础导航条
在制作一个基础导航条时,主要分以下几步:
第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
“.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
Bootstrap系列 -- 38. 基础导航条的更多相关文章
- Bootstrap系列 -- 37. 基础导航样式
Bootstrap框架中制作导航条主要通过“.nav”样式.默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”.“nav-pills”之类.比如右侧代码 ...
- Bootstrap系列 -- 43. 固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定 ...
- bootstrap学习笔记之导航条基础
导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Jquery | 基础 | 导航条在项目中的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
- Bootstrap系列 -- 44. 分页导航
带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在B ...
- Bootstrap 固定在顶部导航条
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- bootstrap最简单的导航条
<nav class="navbar navbar-default navbar-static-top"> <div class="navbar-hea ...
随机推荐
- 标准IO的缓冲问题
在看APU时,第8章进程时, #include <stdio.h> #include <unistd.h> ; char buf[] = "a write to st ...
- [嵌入式开发板]iTOP-4412以模块的方式编译驱动
本文转自迅为:http://www.topeetboard.com 大家好,本章节我们将向大家讲解如何在 linux 下实现以模块的方式加载内核驱动.我们以内核里面蜂鸣器的 驱动为例来讲解. 1)首先 ...
- 学习嵌入式Linux-选择iTOP-4412开发板
部分视频观看地址: [视频教程]iTOP-4412开发板之学习方法--致初学者 http://v.youku.com/v_show/id_XNzQ5MDA4NzM2.html [视频教程]三星Exyn ...
- USACO section1.1 Broken Necklace
/* ID: vincent63 LANG: C TASK: beads */ #include <stdio.h> #include<stdlib.h> #include&l ...
- 分享用于学习C++图像处理的代码示例
为了便于学习图像处理并研究图像算法, 俺写了一个适合初学者学习的小小框架. 麻雀虽小五脏俱全. 采用的加解码库:stb_image 官方:http://nothings.org/ stb_image. ...
- Linux下php安装memcache扩展
安装环境:CentOS 6.4 php扩展memcache的作用是为了支持memcached数据库缓存服务器,下面是安装方法. 1.下载 下载地址:http://pecl.php.net/packag ...
- HTML5和css3的总结二
继续接着昨天的整理 [倒影]:用的不是很多 -webkit-box-reflect:below 20px -webkit-linear-gradient(rgba(0,0,0,0,),rgba(0,0 ...
- Nginx采用https加密访问后出现的问题
线上的一个网站运行了一段时间,应领导要求,将其访问方式更改为https加密方式.更改为https后,网站访问正常,但网站注册功能不能正常使用了! 经过排查,是nginx配置里结合php部分漏洞了一个参 ...
- Saltstack-初体验
安装 rpm -Uvh http://mirrors.yun-idc.com/epel/6Server/x86_64/epel-release-6-8.noarch.rpm yum install s ...
- 一篇文章告诉你为何GitHub估值能达20亿美元
软件开发平台GitHub今日宣布,已获得硅谷多家知名风投2.5亿美元融资,这也让其融资总额达到了3.5亿美元,此轮融资对GitHub的估值约为20亿美元. GitHub有何特别之处? GitHub创立 ...