1、下拉菜单;

  1. <div class="btn-group">
  2.    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认<span class="caret"></span></button>
  3. <ul class="dropdown-menu" role="menu">
  4. <li><a href="#">nihao</a></li>
  5. <li><a href="#">nihao</a></li>
  6. <li class="divider"><a href="#">nihao</a></li>              //divider 分割符;
  7. <li><a href="#">nihao</a></li>
  8. </ul>
  9. </div>

2、导航栏;

nav-tab 切换        nav-pills 胶囊式;

  1. <ul class="nav nav-pills"> //nav-pills 胶囊式 nav-tabs tab式;
  2. <li class="active"><a href="#">file</a></li>
  3. <li><a href="#">view</a></li>
  4. <li><a href="#">help</a></li>
  5. </ul>

堆栈式导航;

  1. <ul class="nav nav-stacked">
  2. <li><a href="#">file</a></li>
  3. <li><a href="#">view</a></li>
  4. <li><a href="#">help</a></li>
  5. </ul>

  

 注: 该博客为扩展型;

bootstrap学习: 基本组件以及布局;的更多相关文章

  1. bootstrap学习总结-02 网格布局

    1  网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...

  2. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

  3. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  4. Bootstrap学习之路(3)---列表组件

    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...

  5. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  6. Bootstrap 学习(1)

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  7. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  8. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  9. bootstrap学习笔记 插件概述

    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...

  10. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

随机推荐

  1. java.lang.NullPointerException一个低级的解决方法

    java.lang.NullPointerException 这次因为调用了类的方法的时候忘记了new对象了 导致该对象为空

  2. 【转载】FPGA算法设计随笔

    FPGA设计算法依次需要完成MATLAB浮点仿真 MATLAB定点仿真 verilogHDL定点运算以及数据对比的流程.其中浮点到定点的转换尤为重要,需要在数据表示范围和精度之间做出权衡.另外掌握定点 ...

  3. Cookies 和session

    一 会话跟踪 在一个会话的多个请求中共享数据,这就是会话跟踪技术 请求登录(请求参数是用户名和密码): 请求转账(请求参数与转账相关的数据): 请求信誉卡还款(请求参数与还款相关的数据). 登录信息在 ...

  4. CentOS 7 软件安装简记

    Install SW Record ================= $ sudo yum install vim-X11.x86_64 $ sudo yum install clang.x86_6 ...

  5. Spring Security(三十六):12. Spring MVC Test Integration

    Spring Security provides comprehensive integration with Spring MVC Test Spring Security提供与Spring MVC ...

  6. Redis入门---字符串类型

    阅读目录 1.keys * 命令 2.判断一个键是否存在(exists key) 3.删除键 4.获取键值的数据类型 5 递增数字(incr) 6.增加指定的整数 (INCRBY) 7.减少指定的整数 ...

  7. golang lua使用示例

    package main import ( "fmt" "github.com/yuin/gopher-lua" ) func hello(L *lua.LSt ...

  8. 599. Minimum Index Sum of Two Lists(easy)

    Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...

  9. hdu-1728(贪心&&bfs的灵活运用吧)

    链接 [https://vjudge.net/contest/256476#problem/D] 题意 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到 ...

  10. Ubuntu软件的安装与删除