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复习总结的更多相关文章

  1. bootstrap复习:组件

    一.下拉菜单 1.实例:将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.为下拉菜单的父 ...

  2. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  3. bootstrap复习

    菜单 <div class="row">下拉菜单/分裂菜单</div> <div class="dropdown btn-group&quo ...

  4. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  5. 【温故知新】——Bootstrap响应式知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...

  6. 前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目

    流式布局思想 """ 页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比,就可以随屏幕 ...

  7. 从零开始学Bootstrap(1)

    最近需要做一个简单的Web页面. 考虑到前端经验不足,为了快速产出,同时项目只是一个工具,对项目没有什么要求,所以我选择了Bootstrap这个框架作为Web框架. 写从零开始学Bootstrap的初 ...

  8. Angularjs + Bootstrap 制作的一个TODO List

    看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用).为了增强理解,下面写了一篇文章,用以复习 ...

  9. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

随机推荐

  1. Guava 是个风火轮之基础工具 (1)

    转自:http://www.jamespan.me/blog/2015/02/08/guava-basic-utilities-1/ Guava 是个风火轮之基础工具 (1) 前言 Guava 是 J ...

  2. Iterator和for...of

    Iterator和for...of 什么是Iterator ES6中的Map 和 Set ,再加上之前的数组和对象,这样就有了四种数据集合,用户可以组合使用它们,定义自己的数据结构.这时,我们就需要一 ...

  3. 原生node实现简易留言板

    原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...

  4. leetCode笔记--(1)

    陪朋友刷题,记录下. 1.Evaluate the value of an arithmetic expression in Reverse Polish Notation.Valid operato ...

  5. 01.Python基础-3.集合容器

    1 列表list 1.1 列表介绍 Python内置的一种数据类型是列表:list. 有序的集合,可随时添加和删除其中的元素. 每个元素都分配一个数字 --它的位置,或索引.0,1,2,3-- 可存放 ...

  6. 基于ALSA的WAV播放和录音程序

    http://blog.csdn.net/azloong/article/details/6140824 这段时间在探索ALSA架构,从ALSA Core到ALSA Lib,再到Android Aud ...

  7. 关于ajax异步请求不到数据的问题 302跨域请求

    项目大致问题是这样的 在线咨询模块的数据是通过ajax异步加载来请求到数据,然后动态解析并且显示 前台页面的请求代码 后台action: 另外就是这个项目还有一个登陆权限的认证,如果不登录后台或者登录 ...

  8. BA--调试经验笔记

    100%的湿度是水蒸气,称做饱和空气,人体的相对湿度范围为20%---60%,当室内的湿度小于20%时,容易产生静电,尤其在计算机上,超过60%就过湿 冬天适宜温度24.5+-1.5,夏天适宜温度22 ...

  9. [Linux]第一部分-认识Linux及Linux主机规划与安装

    ctrl + alt + f1~f6 切换六个终端ctrl + alt + f7 图形化界面 startx 开启x-window桌面 ls -al /root 列出root目录 date日期 +%y/ ...

  10. Java关键字整理之一

    变量.函数.类的前面都可能会用到关键字,最常见的 private.public.protected.default 这四个修饰符的访问权限如下表: -------------------------- ...