导航条:

div.navbar.navbar-default  >  ul.nav.navbar

无非两层:

父div:

 navbar {相对位置、最低高度50px、下部margin:20px、透明边框}

 navbar-default{设置背景、设置边框}

子ul:
   .navbar-nav { //这个主要作用是:设置下部a标签字体高度。
margin: 7.5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
} .navbar > li { left 浮动} .nav {
padding-left: 0;
margin-bottom: 0;
list-style: none; // 首先去掉列标
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
类淘宝-MENU

div.navbar.navbar-default>div.navbar-header>a.navbar-brand{菜单标题}+button.navbar-toggle[data-toggle="collapse" data-target=".navbar-collapse-toggle"]>span.icon-bar*3^^div.collapse.navbar-collapse.navbar-collapse-toggle>ul.navbar-nav.nav>(li>a[href="#"]{菜单项-$})*5

// navbar-inverse

网格系统:

bootstrap 笔记的更多相关文章

  1. Bootstrap笔记--快速入门

    首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...

  2. 【巩固】Bootstrap笔记三

    这段笔记介绍了bootstrp中以下几点应用点: 警告框的使用 面板功能 运用chart.js制作图表 进度条的制作 媒体对象的制作 有一个元素如果有属性alert-dismissible" ...

  3. 【巩固】Bootstrap笔记一

    这两天开始重新巩固一下bootstrap的学习,群里有朋友介绍说麦子学院的教程不错,特地看了一下,有2个项目练习,所以跟着做了一下,下面开始笔记. <button class="nav ...

  4. 【巩固】bootstrap笔记二

    这段主要记录如何给排版完的页面加一些动画效果,用到了的插件有: wow.min.js jquery.singlePageNav.min.js animate.css 将导航条上对应的菜单和页面上对应的 ...

  5. 深入理解Bootstrap笔记

    框架介绍 1.框架简介 2.CSS基本语法 3.JavaScript基本语法 4.Bootstrap整体架构 5.12栅格系统 6.CSS组件架构设计思想 7.JavaScript插件架构 CSS布局 ...

  6. bootstrap笔记-布局

    1.通过文本对齐类,可以简单方便的将文字重新对齐. <p class="text-left">Left aligned text.</p> <p cl ...

  7. bootstrap 笔记01

    bootstrap源码样式: 移除body的margin声明设置body的背景色为白色为排版设置了基本的字体.字号和行高设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式 1, ...

  8. Bootstrap笔记合集

    一. 为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: ☑   .text-left:左对齐 ☑   .text-center:居中对齐 ☑   .text-right ...

  9. Bootstrap笔记-加强版

    1.bootstrap引入: <!DOCTYPE html><html lang="zh-cn"><head><meta charset= ...

  10. 后端小白的Bootstrap笔记 一

    栅格系统 下面这张图是Bootstrap对栅格系统有关系数的规定 什么是栅格体统? 栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 120 ...

随机推荐

  1. EXT总结例子

     //页面按钮点击展开隐藏 {  空格                    xtype:'fieldset',                    title:'<b>高级搜索< ...

  2. PHP操作MySQL数据库5个步骤

    PHP操作MySQL数据库一般可分为5个步骤:1.连接MySQL数据库服务器:2.选择数据库:3.执行SQL语句:4.关闭结果集:5断开与MySQL数据库服务器连接. 1.用mysql_connect ...

  3. 【knockout】ko绑定click事件传多个参数,

    源:http://knockoutjs.com/documentation/event-binding.html <a href="javascript:;" class=& ...

  4. BZOJ 2179: FFT快速傅立叶

    2179: FFT快速傅立叶 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2923  Solved: 1498[Submit][Status][Di ...

  5. Python【第三章】:python 面向对象 (new)

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...

  6. windows 下 新建 点开头的文件和文件夹

    新建 .aaa文件夹 cmd:$ mkdir .aaa 新建 .aaa文件夹 echo " >> .aaa

  7. 如何阅读Java源码 阅读java的真实体会

    刚才在论坛不经意间,看到有关源码阅读的帖子.回想自己前几年,阅读源码那种兴奋和成就感(1),不禁又有一种激动. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心.   说到技术基础,我打个比 ...

  8. awk删除文件第一列

    awk删除文件第一列 1.采用awk awk '{$1="";print $0}' file 2.采用sed sed -e 's/[^]* //' file sort -R fil ...

  9. git操作---查询

    1.查看git的状态   git status 2.查看git的日志历史记录 git log 3.查看当前git的分支 git branch 4.查看git的配置信息 git config --lis ...

  10. Hive时间操作[转]

    时间字段格式化 from_unixtime(unix_timestamp(VisitTime),'yyyy-MM-dd') 日期函数UNIX时间戳转日期函数: from_unixtime语法:   f ...