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 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
随机推荐
- linux环境下快速安装Mariadb和Redis
一 Mariadb(Mysql)篇 1.新建一个yum源仓库 touch /etc/yum.repos.d/Mariadb.repo 2.在这个yum源仓库文件中,添加仓库url地址 [mariadb ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
- redis Lua学习与坑
1.在写lua脚本往redis中添加zadd 有序集合的时候一直报 "value is not a valid float"的错误,经过查询相关资料,最后发现,是顺序写反了. 相关 ...
- How To Size Your Apache Flink® Cluster: A Back-of-the-Envelope Calculation
January 11, 2018- Apache Flink Robert Metzger and Chris Ward A favorite session from Flink Forward B ...
- RabbitMQ安装后无法访问https://localhost:15672/ 控制台问题解决
1.安装完后 我们进入到我们安装到 sbin目录C:\Program Files\RabbitMQ Server\rabbitmq_server-3.7.2\sbin执行:rabbitmq-plugi ...
- 勇者斗恶龙 uva 11292(简单贪心)
思路:先将龙和士兵进行分别排序从小到大.然后,每次找当前最小龙的第一个大于它的骑手之后退出,开始下一个龙,重复上一次操作. #include<iostream> #include<a ...
- python基础语法、数据结构、字符编码、文件处理 练习题
考试范围 '''1.python入门:编程语言相关概念2.python基础语法:变量.运算符.流程控制3.数据结构:数字.字符串.列表.元组.字典.集合4.字符编码5.文件处理''' 考试内容 1.简 ...
- root用户无法访问Mysql数据库问题的解决
在使用Centos系统远程访问Mysql数据库的时候,系统提示报如下错误: Access Denied for User 'root'@'localhost' (using password: YES ...
- Spring Cloud 入门教程(七): 熔断机制 -- 断路器
对断路器模式不太清楚的话,可以参看另一篇博文:断路器(Curcuit Breaker)模式,下面直接介绍Spring Cloud的断路器如何使用. SpringCloud Netflix实现了断路器库 ...
- 爬虫基础(三)-----selenium模块应用程序
摆脱穷人思维 <三> : 培养"目标导向"的思维: 好项目永远比钱少,只要目标正确,钱总有办法解决. 一 selenium模块 什么是selenium?seleni ...