Bootstrap学习笔记

来源：互联网发布：知行汽车江苏重大项目编辑：程序博客网时间：2024/05/02 00:41

Bootstrap依赖jQuery，因此jQuery必须在Bootstrap之前引入

1、Get started（起步）

--目录结构
bootstrap/
├── css/
│   ├── bootstrap.css          编译未压缩版，可以在任意web项目中直接使用
│   ├── bootstrap.min.css     //压缩版。
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
└── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

章节
主要是有Scaffolding，Base CSS，Components，Javascript plugins以及一些组件

案例
介绍Bootstrap的使用方式，导入方法

2、Scaffolding（脚手架）

全局设置

*必须使用HTML5文档类型<html lang="en">

*移除了body的margin
设置background-color：white
通过@linkcolor设置全局连接颜色，处于hover的时候才会有下划线
//这些样式可以在scaffolding.less中找到

默认栅格系统

默认12列，940px的container，没有启用相应式布局，若加入相应式布局css，可是窗口自动从724px到1170px进行调整。低

于767px宽时，列将不再固定并在垂直方向堆叠

使用栅格系统
创建一个row container，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的

栅格数之和最多是12(或者等于其父容器的栅格数)。
eg：//创建一个一列为4个栅格的
   <div class="row">
   <div class="span4">...</div>
   </div>

偏移列
.offset*类可以将列右移，.offset4将span4右移了4列的宽度<div class="span4 offset4">...</div>

嵌套列
在默认的栅格系统里，在已有的.span*添加一个.row并加入.span*列。被嵌套列中每列列数和要小于等于父级列，不然会在
垂直方向堆叠。

流式栅格系统
对每列的宽度使用的是百分比而不是像素量。可以对不同分辨率和设备做出适当调整
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来

流式栅格的偏移
定义方式与默认的相同

流失嵌套布局
被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度

布局

固定布局
通用固定宽度<div class="container">

流式布局<div class="container-fluid">

响应式设计    （这个内容没有重点看）
*Bootstrap在默认情况下是没有引入响应式特性的

启用
<head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS

后续。。。

0 0