【分享】bootstrap学习笔记

一、基础知识

1.整体架构

以响应式设计为理念，css组件、js插件+jquery、基础布局组件和12栅格系统搭建。

1.1响应式设计：结合media query查询，适应更多设备，自动适应用户的设备环境，不必为每个终端做一个特定的版本。

2.css12栅格系统

将容器平分12份，行（row）必须包含在.container中，只有列（column）可作为行的直接子元素。ps：如果要充满屏幕100%显示，那就不能用container样式了，因为该样式针对4种不同的屏幕大小固定了尺寸，可自己定义一个样式，注意修复container的-15px的外边距。

3.基本用法

3.1列组合：使用数字来合并，有点类似colspan，col-md-4，其中col指的是列，md指的是中型屏幕，4指的是12列中占4列的宽度，实现方式为左浮动加宽度百分比

3.2列偏移：使用offset来定义，具体样式如：.col-md-offset-*，实现原理是利用1/12的margin-left

3.3列排序：通过push（推）和pull（拉）来改变左右浮动，以左为基准

4.响应式栅格

4.1跨设备组合定义：md-中屏，超小-xs，小型-sm，大屏-lg。向大兼容，不支持向小兼容。

4.2清除浮动：在定义支持多个设备的样式时，比如：col-xs-6 col-sm-3，在超小屏有可能会发生错位，需要用clearfix来清除，比如：<div class="clearfix visible-xs"></div>，visible-xs是指当能够在超小屏幕上显示

5.css组件

原理：附加和覆盖的原则，后边的样式覆盖掉前面的样式

5.1颜色样式：默认为很多组件提供了5种颜色，分别是primary（重点蓝）、success（成功绿）、info（信息蓝）、warning（警告橙）、danger（危险红）

5.2尺寸样式：一般组件都有4种尺寸：超小（xs）、小型（sm）、普通（default也可以不写，默认）、大型（lg）。

同一个组件的不同类型的样式可以组合到一起使用，比如颜色样式btn-success和尺寸样式btn-lg，示例：btn btn-success btn-lg

转载于:https://www.cnblogs.com/zinan/p/5809585.html

【分享】bootstrap学习笔记相关推荐

Bootstrap学习笔记
Bootstrap学习笔记 Bootstrap介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵 ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测字符串是否符合 &q ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）
这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老 ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...

【分享】bootstrap学习笔记

【分享】bootstrap学习笔记相关推荐

最新文章

热门文章