BootStrap复习总结
Bootstrap3 复习总结:
1. 栅格系统:
sm:768px
md:992px
lg:1200px
(响应式布局)
1.横向分割页面的空间。
2.在分割的同时考虑到响应式。
内部实现是12列的栅格系统,为什么是12?
答:因为12是1,2,3,4,6的最小公倍数,所以12列栅格系统相对较灵活
.col
.col-md-2
.col-sm-3
...
2.表单
.container
.form-group (内容是margin-bottom:1rem;)
.has-error
.form-inline
.form-control (内容是一些特殊的css样式)
3.按钮
.btn btn-default
btn-primary
btn-danger
btn-warning
btn-info
btn-lg
btn-sm
btn-xs
btn-block(占父元素整宽)
4.按钮组
.btn-group 给div一个类,里面是一组按钮
.btn-group-vertical
5.导航
ul.nav.nav-tabs
li.active
ul.nav.nav-pills
.nav-stacked(竖着放)
.nav-justified(平均分布)
6.导航栏
.navbar-header
.navbar-brand
.nav.navbar-nav
.nav.navbar-nav.navbar-right
7.面板
.panel.panel-default
.panel-heading
.panel-body
.panel-footer
8.表格
.table
.table-striped
.table-hover(鼠标滑上去有动画)
.table-borderd
tr.success
tr.warning
tr.danger
9.其他组件
分页
ul.pagination
li
ul.pager
li.disabled
面包屑导航
div.breadcrumb
li.active
标签
span.label.label-success
span.label.label-info
span.label.label-warning
徽章
span.badge
警告
div.alert.alert-danger
div.alert.alert-success
列表
div.list-group
a.list-group-item
BootStrap复习总结的更多相关文章
- bootstrap复习:组件
一.下拉菜单 1.实例:将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.为下拉菜单的父 ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
- bootstrap复习
菜单 <div class="row">下拉菜单/分裂菜单</div> <div class="dropdown btn-group&quo ...
- html+css复习之第3篇 | jquery | bootstrap
html+css复习之第3篇 | jquery | bootstrap
- 【温故知新】——Bootstrap响应式知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...
- 前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目
流式布局思想 """ 页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比,就可以随屏幕 ...
- 从零开始学Bootstrap(1)
最近需要做一个简单的Web页面. 考虑到前端经验不足,为了快速产出,同时项目只是一个工具,对项目没有什么要求,所以我选择了Bootstrap这个框架作为Web框架. 写从零开始学Bootstrap的初 ...
- Angularjs + Bootstrap 制作的一个TODO List
看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用).为了增强理解,下面写了一篇文章,用以复习 ...
- 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity
一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...
随机推荐
- Guava 是个风火轮之基础工具 (1)
转自:http://www.jamespan.me/blog/2015/02/08/guava-basic-utilities-1/ Guava 是个风火轮之基础工具 (1) 前言 Guava 是 J ...
- Iterator和for...of
Iterator和for...of 什么是Iterator ES6中的Map 和 Set ,再加上之前的数组和对象,这样就有了四种数据集合,用户可以组合使用它们,定义自己的数据结构.这时,我们就需要一 ...
- 原生node实现简易留言板
原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...
- leetCode笔记--(1)
陪朋友刷题,记录下. 1.Evaluate the value of an arithmetic expression in Reverse Polish Notation.Valid operato ...
- 01.Python基础-3.集合容器
1 列表list 1.1 列表介绍 Python内置的一种数据类型是列表:list. 有序的集合,可随时添加和删除其中的元素. 每个元素都分配一个数字 --它的位置,或索引.0,1,2,3-- 可存放 ...
- 基于ALSA的WAV播放和录音程序
http://blog.csdn.net/azloong/article/details/6140824 这段时间在探索ALSA架构,从ALSA Core到ALSA Lib,再到Android Aud ...
- 关于ajax异步请求不到数据的问题 302跨域请求
项目大致问题是这样的 在线咨询模块的数据是通过ajax异步加载来请求到数据,然后动态解析并且显示 前台页面的请求代码 后台action: 另外就是这个项目还有一个登陆权限的认证,如果不登录后台或者登录 ...
- BA--调试经验笔记
100%的湿度是水蒸气,称做饱和空气,人体的相对湿度范围为20%---60%,当室内的湿度小于20%时,容易产生静电,尤其在计算机上,超过60%就过湿 冬天适宜温度24.5+-1.5,夏天适宜温度22 ...
- [Linux]第一部分-认识Linux及Linux主机规划与安装
ctrl + alt + f1~f6 切换六个终端ctrl + alt + f7 图形化界面 startx 开启x-window桌面 ls -al /root 列出root目录 date日期 +%y/ ...
- Java关键字整理之一
变量.函数.类的前面都可能会用到关键字,最常见的 private.public.protected.default 这四个修饰符的访问权限如下表: -------------------------- ...