1、下拉菜单;

<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">nihao</a></li>
<li><a href="#">nihao</a></li>
<li class="divider"><a href="#">nihao</a></li>              //divider 分割符;
<li><a href="#">nihao</a></li>
</ul>
</div>

2、导航栏;

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

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

堆栈式导航;

<ul class="nav nav-stacked">
<li><a href="#">file</a></li>
<li><a href="#">view</a></li>
<li><a href="#">help</a></li>
</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. Redis(十一):Redis的事务功能详解

    相关命令 1. MULTI 用于标记事务块的开始.Redis会将后续的命令逐个放入队列中,然后才能使用EXEC命令原子化地执行这个命令序列. 这个命令的运行格式如下所示: MULTI 这个命令的返回值 ...

  2. 【Intellij idea】spring中@Autowired注入失败

    @Autowired注入失败失败的解决办法? 现有的解决的方案是: 打开file-settings或者ctrl+alt+s -> Editor 然后在Inspections 点击搜索栏 输入Sp ...

  3. GoldenDict词典的超级实用高级玩法----全文搜索功能

    快捷键: Ctrl+Shift+F 菜单进入:搜索--全文搜索 模式:正则表达式 比如:我想知道地道的英文表达    请xx天/周/年假 给搜索框写入正则表达式   请(.)(天|周|年)假 就可以了 ...

  4. Spring注解定时器使用

    一.首先要配置我们的spring-service.xml 1.xmlns 多加下面的内容 xmlns:task="http://www.springframework.org/schema/ ...

  5. 解决connect() failed (111: Connection refused) while connecting to upstream

    使用nginx时, 有可能遇到connect() failed (111: Connection refused) while connecting to upstream的问题. 如果upstrea ...

  6. Docker(2):使用Dockerfile创建支持SSH服务的镜像

    1.创建工作目录 # mkdir sshd_ubuntu # ls 在其中,创建Dockerfile和run.sh文件 # cd sshd_ubuntu/ # touch Dockerfile run ...

  7. JVM内存溢出时快照转存HeapDump到文件

    # Heap Dump 获取方式使用 JVM 参数获取 dump 文件进入Tomcat的'bin'目录,在'catalina.sh'文件里添加如下内容 >-XX:+HeapDumpOnOutOf ...

  8. Linux内存管理 (25)内存sysfs节点解读

    1. General 1.1 /proc/meminfo /proc/meminfo是了解Linux系统内存使用状况主要接口,也是free等命令的数据来源. 下面是cat /proc/meminfo的 ...

  9. STL中的set使用方法详细!!!!

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  10. webservice异常

    webservice的一个常见异常: [SOAPException: faultCode=SOAP-ENV:Client; msg=Error parsing HTTP status line &qu ...