bootstrap 入门

响应式布局

  • 概念:对不同屏幕尺寸做出响应,并进行相应布局
  • 原理:使用媒体查询设置不同的断点,进行不同css布局响应
  • 优点:一个网站可以兼容多种终端,不需要重复开发
  • 缺点:工作量大、代码累赘、加载时间长、效率低、冗余代码较多
  • 适用场景:结构比较简单,展示型网站
  • 不适用场景:交互较多,功能性的网站不适用

容器

1.流体容器

  • width: auto // 注意 auto 和 100% 的区别
  • 两侧15px padding

2.固定容器

屏幕大小 (设置断点) width
xs(小于768px) width:auto
sm(大于等于768px) width:720+槽宽(15px + 15px)
md(大于等于992px) width:940+槽宽(15px + 15px)
lg(大于等于1200) width:1140+槽宽(15px + 15px)

两侧15px padding

3.栅格系统

  • 栅格是响应式布局的一种实现方式
  • 将页面栅格化
  • 一般将水平划分为12列,根据媒体查询监听缩放,决定元素占用几列
  • container提供容器
  • row是为了清除浮动,至于为什么要清楚浮动和怎样清楚浮动,可以参考这里:链接
  • 实现方式:
    1. 利用float:left属性,控制子元素的浮动、挤压、排列。
    2. 利用flex布局,实现主轴wrap挤压换行排列
//示例调用代码
<div class="container">
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">2</div>
        <div class="col-1">3</div>
        <div class="col-1">4</div>
        <div class="col-1">5</div>
        <div class="col-1">6</div>
        <div class="col-1">7</div>
        <div class="col-1">8</div>
        <div class="col-1">9</div>
        <div class="col-1">10</div>
        <div class="col-1">11</div>
        <div class="col-1">12</div>
    </div>
</div>

a.行

​ 两侧 -15px margin

b.列

公共样式
​ 两侧有 15px 的padding
​ 相对定位
float

width
​ 1~12

列排序:

​ left (push)
​ right (pull)
​ 0~12
​ 0:auto

列偏移:
​ margin-left (offset)
​ 0~12

注意:阈值上样式的设置不能跳跃

栅格源码分析

1.流体容器&固定容器 公共样式

margin-right: auto;
margin-left: auto;
padding-left:  15px;
padding-right: 15px;	

2.固定容器 特定样式
顺序不可变

@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}

3.行

margin-left:  -15px;
margin-right: -15px;

4.列

/*
.make-grid-columns()--->
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
...
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.make-grid(xs)--->
*/

float-grid-columns(@class);

/*
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
    *     float: left;
    * }
.loop-grid-columns(@grid-columns, @class, width);
* .col-xs-12{
    *     width:12/12;
    * }
* .col-xs-11{
    *     width:11/12;
    * }
* ...
* .col-xs-1{
    *     width:1/12;
    * } 
*/

.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);

/*
*push                  pull:
* .col-xs-push-12{         .col-xs-pull-12{      
    *     left:12/12;              right:12/12;
    * }                        }
* .col-xs-push-11{
    *     left:11/12;
    * }
* ...                      ...
* .col-xs-push-1{
    *     left:1/12;
    * } 
* .col-xs-push-0{           .col-xs-pull-0{
    *     left:auto;               right:auto;
    * }                         }
*/

.loop-grid-columns(@grid-columns, @class, offset);

响应式工具

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  .responsive-invisibility();
}
...

栅格盒模型设计的精妙之处

容器两边具有15px的padding 、
行 两边具有-15px的margin
列 两边具有15px的padding

为了维护槽宽的规则,
列两边必须得要15px的padding

为了能使列嵌套行
行两边必须要有-15px的margin

为了让容器可以包裹住行
容器两边必须要有15px的padding

less的继承

#test{
    &:extend(.father)
}
#test:extend(.father){
}

继承实质上将.father选择器和#test组合成一个选择器,声明块使用.father的

all: 继承所有和.father相关的声明块
切记父类不能定义成混合(继承的灵活性能高,混合灵活性能低)

less的避免编译

~"不会被编译的内容"
​ 变量在less中属于块级作用域,延迟加载

bootstrap实例

本文作者:Liwker

本文链接:https://www.cnblogs.com/Liwker/p/14415908.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Liwker  阅读(50)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 灰色と青(翻自 米津玄師) kobasolo,春茶
  2. 2 スパークル nin
  3. 3 愛にできることはまだあるかい(翻自 RADWIMPS) 春茶
  4. 4 夏恋慕 kobasolo,春茶
  5. 5 花に亡霊 ヨルシカ
  6. 6 フラレガイガール(翻自 さユり) 春茶
  7. 7 ふたりごと(翻自 RADWIMPS) 茶泡饭,kobasolo,春茶
  8. 8 Lemon 米津玄師
  9. 9 君と100回目の恋(movie ver.) 葵海 starring miwa
  10. 10 風になる つじあやの
  11. 11 Letter Song ヲタみん
  12. 12 my sweetest one Aimer
  13. 13 Ref:rain Aimer
  14. 14 YELLOW(翻自 神山羊) 麦吉_Maggie
灰色と青(翻自 米津玄師) - kobasolo,春茶
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作曲 : 米津玄師

作词 : 米津玄師

袖丈が覚束ない夏の終わり

明け方の電車に揺られて思い出した

懐かしいあの風景

たくさんの遠回りを繰り返して

同じような街並みがただ通り過ぎた

窓に僕が写ってる

君は今もあの頃みたいにいるのだろうか

ひしゃげて曲がったあの自転車で走り回った

馬鹿ばかしい綱渡り 膝に滲んだ血

今はなんだかひどく虚しい

どれだけ背丈が変わろうとも

変わらない何かがありますように

くだらない面影に励まされ

今も歌う今も歌う今も歌う

···

忙しなく街を走るタクシーに

ぼんやりと背負われたままくしゃみをした

窓の外を眺める

心から震えたあの瞬間に

もう一度出会えたらいいと強く思う

忘れることはないんだ

君は今もあの頃みたいにいるのだろうか

靴を片方茂みに落として探し回った

何があろうと僕らはきっと上手くいくと

無邪気に笑えた 日々を憶えている

どれだけ無様に傷つこうとも

終わらない毎日に花束を

くだらない面影を追いかけて

今も歌う今も歌う今も歌う

朝日が昇る前の欠けた月を

君もどこかで見ているかな

何故か訳もないのに胸が痛くて

滲む顔 霞む色

今更悲しいと叫ぶには

あまりに全てが遅すぎたかな

もう一度初めから歩けるなら

すれ違うように君に会いたい

どれだけ背丈が変わろうとも

変わらない何かがありますように

くだらない面影に励まされ

今も歌う今も歌う今も歌う

朝日が昇る前の欠けた月を

君もどこかで見ているかな

何もないと笑える朝日がきて

始まりは青い色`