1--bootstrap笔记--导航栏的定义
2017-12-31 14:38
357 查看
下载和导入bootstrap
1.登录官网bootstrap,进入download页面,下载bootstrap3.*版本2.导入bootstrap,这里需要导入bootstrap框架,使用标签导入bootstrap即可,这里建议导入bootstrap.min.css,经过了压缩后的bootstrap框架
<link href="css/bootstrap.min.css" rel="stylesheet">
3.设置设备和页面缩放比
这里需要命名为viewport才能被bootstrap框架锁定到,然后添加content内容,width设置为设备宽度,initail-scale设置缩放比为1,shrink-to-fit用户无法收缩
<meta name="viewport" content="width=device-width,initail-scale=1,shrink-to-fit=no">
bootstrap的helloword(导航栏的定义)
由于bootstrap主要通过class的名字来赛选和控制具体的布局,那么class的命名就需要按照它的规则来命名下面展示一段定义好了导航栏的基于bootstrap的代码
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">Project Name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav>
整个导航条的定义
nav标签表示为导航栏,下面一一解释class中的命名规则navbar –表示为一个导航栏,使用该名字之后,bootstrap自动修饰成一个导航栏的样式
navbar-inverse–表示为导航栏的颜色,inverse可以更改成其他来更换颜色。
navbar-fixed-top–指定导航条的位置
role=navigation–让浏览器认识到这是一个导航栏,当然,这里不是在bootstrap框架中也需要这么写,不写当然没有问题,写上更加严格和规范
导航条内部内容居中显示
<div class="container">
container这个容器在bootstrap中经常被使用到,使用之后,内部的元素自动居中显示
所以在导航栏中一般需要加一个container将内部的元素居中显示才显得漂亮
导航栏之logo标签的定义
如果需要定义个logo,那么只需要在内部添加一个div,<div class="navbar-header">
当然如果还需要让器标签为可点击和跳转,那么只需要,在内部添加一个
<a>标签即可
导航栏之选项栏的定义
定义导航栏当然是使用<ul>标签和
<li>标签,当然也需要在外部添加一层标签用来这顶为
<ul>标签为导航栏
<div id="navbar" class="collapse navbar-collapse">
效果展示
相关文章推荐
- 2016年6月1日下午(传智Bootstrap笔记(Bootstrap 导航栏元素))
- Bootstrap学习笔记-导航栏
- bootstrap定义导航栏
- HTML笔记(九)bootstrap之导航栏
- [学习笔记] bootstrap(六): nav导航栏和面包屑导航
- BootStrap学习笔记之nav导航栏和面包屑导航
- Bootstrap响应式前端框架笔记十——导航栏相关组件
- C#学习笔记——关于定义属性
- Bootstrap 导航栏
- 搜索引擎学习笔记——定义URL类和Page类
- Python笔记——类定义
- js学习笔记——函数定义
- Maven系列笔记(一)——定义与安装
- Bootstrap学习总结笔记(21)-- 基本插件之按钮
- Bootstrap基本组件学习笔记之缩略图(13)
- [Spring Data Repositories]学习笔记--定义自己的repository
- Oracle笔记 六、PL/SQL简单语句块、变量定义
- [javase学习笔记]-5.1 数组的定义
- 菜鸟笔记之线性表定义
- 学习笔记---C语言中全局变量,变量,常量的定义与使用