【分享】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

时间: 2024-10-11 02:18:21

【分享】bootstrap学习笔记的相关文章

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习. Bootstrap  是一个相应式的布局的一个前端框架.bootstrap 学习有以下步骤:    1.bootstrap 安装,    2.bootstrap 全局css 样式    3.bootstrap css组件    4.bootstrap javascr

Bootstrap 学习笔记 之表单(4 day)

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 需要一提的就是表单的状态: 表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,