Bootstrap入门

1.bootstrap入门简介

①用于开发响应式布局，移动设备优先：自适应

②一组基于jQuery的js插件集：提供写好的css和js样式集

③下载bootstrap：bootstrap中文网 起步 css样式等

④开发工具有 Hbuilder ，nodepad++，DW等

2.bootstrap使用

①导入文件进入web项目中的css js font等文件

②引入<link rel="stylesheet" href="css/bootstrap.min.css>

<script type="application/javascript" src="js/jquery-min......">

<script type="application/javascript" src="js/bootstrap.min-......"

3.栅格系统布局

①响应式布局：

设计的网站可以兼容多个例手机，台式机，笔记本使之自适应

添加viewport属性

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

②

bootstrap将屏幕大小拆分成12列 每个格的大小由不同分辨率决定

③栅格系统使用

一必须先引入container类 row类

例如 <div class="container">

<div class="row">

<div class="col-md-4"> </div> //占了四等份 中等分辨率

<div class="col-me-8"> </div> //占了八等份 行内有列

</div>

</div>

④不同分辨率下div占不同的等份

<div class="col-md-4 col-sm-6"> </div> //sm小屏幕下占一半 中等屏幕下占四份

4.媒体查询

①在不同的分辨率下改变样式

@media (max-width: 768px) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }

 

5.栅格系统容器

①四个不同的分辨率

在不同的分辨率下 container的div最大宽度不同 自动识别分辨率来设置div的宽度

默认这个屏幕要小 然后居中

②如①占不满全屏

设置 container-fluid 可以占全屏 // class="container-fluid"

③在css等中可以打开没有压缩过的css可以 ctrl+f 进入搜索 样式 min为压缩过的

6.栅格系统列组合

①containert 会自动给屏幕拆分成12份 根据col-md-

②当小分辨率时会自动改变排列

③小分辨率自动适应大分辨率

例如将小分辨率设为 一比一 则放大后始终为一比一

④列偏移 col-md-offset-3 左边空几份 列偏移

⑤列嵌套

可以在一行里的一列在写入一行然后再分

7.栅格系统列的排序

①col-md-push-5 向后推五格 //当一行内的列数不够时是调节位置

②col-md-pull-2 向前拉两格

③不同显示器的所占比例不同

中等比例是8:4 超小是6:6 小屏幕是3:6

8.bootstrap文本排版基础

①移动设备优先

②在p标签上 有一个lead样式 可以起到强调

text-conter text-left text-right 左右对齐

③可以直接使用的html5标签 小<small> 引用文本<cite> 强调<b> 斜体<em> 地址<address>

④<abbr title=“跟我一起学习”> 这里面的文本点击后会出现跟我一起学习</abbr>

⑤引用标签 <blockquote>引用这个会添加一个竖杠

当给<blockquote class="pull-right">这个杠会跑到右边 文本右对齐

9.bootstrap列表与代码样式

①无序列表 有序列表默认没有什么特别变化

②去表列表将表前的点或者数字去掉 <ol class="list-unstyled">

③disabled 例 <fieldset disabled> 这样这里面的控件都不能用了

④form-group