bootstrap学习: 基本组件以及布局;
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学习: 基本组件以及布局;的更多相关文章
- bootstrap学习总结-02 网格布局
1 网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...
- Bootstrap学习笔记-响应式布局原理
响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- Bootstrap学习之路(3)---列表组件
列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap 学习(1)
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- bootstrap学习笔记 插件概述
Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
随机推荐
- js学习之路2: JavaScript 变量
1. 变量的创建 首先,可以创建一个变量 var firstVar; 这时候,并没有给它赋值.这个变量还是空的. 然后,我们可以给这个变量赋值. firstVar = 128: 2. 变量的赋值 变量 ...
- Python爬虫之Selenium库的基本使用
Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...
- June. 22 2018, Week 25th. Friday
Where words fail, music speaks. 言语无法表达时,音乐就会响起. From Hans Christian Andersen. Where words fail, musi ...
- RabbitMQ安装,Windows下
一.下载安装ERLANG语言 otp_win64_20.3.exe 一直下一步.然后设置环境变量 ERLANG_HOME C:\Program Files\erl9.3 二.安装RabbitMQ ...
- 生成文件的MD5值
import hashlib #########测试################# m = hashlib.md5() m.update(b"hello") m.update( ...
- HBase2.0中的Benchmark工具 — PerformanceEvaluation
简介 在项目开发过程中,我们经常需要一些benchmark工具来对系统进行压测,以获得系统的性能参数,极限吞吐等等指标. 而在HBase中,就自带了一个benchmark工具—PerformanceE ...
- Linux运维高级-核心知识提高
一.Linux之定时任务crond 二.Linux之用户管理 三.Linux之初识磁盘 四.Linux之磁盘管理 五.Linux三剑客-SED 六.Linux三剑客-AWK 七.初识shell编程 八 ...
- P4554 小明的游戏
SPFA板子题 #include <stdio.h> #include <string.h> #define Clean(X,K) memset(X,K,sizeof(X)) ...
- Java Scanner 类
下面是创建 Scanner 对象的基本语法: Scanner s = new Scanner(System.in); Scanner -是java类库的一个基础类,一个可以使用正则表达式来解析基本类型 ...
- L2-2 小字辈 (25 分)
本题给定一个庞大家族的家谱,要请你给出最小一辈的名单. 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见,我们把家族成员从 1 到 N 编号.随后第二行 ...