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. 【原】Java学习笔记018 - 面向对象

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 继承关系的子类可以 ...

  2. 【转载】IIC SPI UART串行总线

    一.SPISPI(Serial Peripheral Interface,串行外设接口)是Motorola公司提出的一种同步串行数据传输标准,在很多器件中被广泛应用. 接口SPI接口经常被称为4线串行 ...

  3. Java 集合系列(一)

    Java集合系列文章将以思维导图为主要形式来展示知识点,让零碎的知识形成体系. 这篇文章主要介绍的是[Java 集合的基本知识],即Java 集合简介. 毕业出来一直使用 PHP 进行开发,对于大学所 ...

  4. syso快捷键设置

    syso快捷键

  5. JavaScript面向对象—基本数据类型和引用数据类型的区别和变量及作用域(函数和变量)

    基本类型和引用类型的值 ECMAScript 变量可能包含两种不同的数据类型的值:基本类型值和引用类型值. 基本类型值指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置. 而引用 ...

  6. zabbix,php,nginx,mysql源码安装 神仙操作

    →软件包 mkdir /soft/ cd /soft ♦下载以下软件包 nginx-1.14.2.tar.gz wget http://nginx.org/download/nginx-1.14.2. ...

  7. 袁创:使用反射动态调用ActiveX控件

    ■■■■前言 目前的基于.NET平台的软件研发中仍然存在大量的对COM及ActiveX控件的调用.使用C#调用ActiveX控件时一般是使用vs.net工具自动生成的互操作性程序集.这种方法操作简单, ...

  8. Practical Mathematical Handwriting

    In this article, I discuss the handwriting of $\mathbb{A}, \mathcal{A}, \mathscr{A}, \mathfrak{A}$'s ...

  9. Python Revisited (变量)

    目录 = 浅拷贝 深拷贝` 函数的默认参数为可变类型时 危险 全局变量与临时变量 global 在函数里面进行复制 再看一个例子 numpy里的bug? 待续 @ 首先,需要指出的是,Python的变 ...

  10. 相片后期处理,PS调出温暖的逆光美女

    原图: 效果图: 后面就是开PS导图: 说明下,因为拍的时候大概知道自己的方法会让照片变暖,现场光线又很暖,所以色温要调低一些,这边是4100,其他不用变,直接转JPG调色了 1:第一步是加第一个曲线 ...