李炎恢bootstrap写首页内容上思路解析

关于利用bootstrap做一张图片对应一段文字，这是李炎恢思路是一生二，二生三，三生万物的思路

第一步 做一个大盒子，这好比修房子，你要划出一块区域给我

<div class="row">

</div>

第二步  在这个大盒子里面做四个盒子，为什么这么做？因为李炎恢把图片与文字看做一个整体，然后再两两独占一行，因为栅格系统是屏幕分为12列，所以两两独占一行的就jiu就是12/2=6
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
<div class="col-md-6">3</div>
<div class="col-md-6">4</div>
</div>
<!-- 1 2为一整体 3 4为一整体-->

这跟农村修房子是一样，上层是客厅搭睡房，下层也是。

第三步  再往四个盒子里面套图片与文字 这里主要是运用bootstrap的媒体知识好控制图片居左，而文字居右的

图片部分·

<div class="media-left">
<a href="#"><img src="img/tab1-1.png" class="media-object" alt=""></a>
</div>

文字部分

<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
</div>

我们发现文字字体也不对？

解决思路：

设置一个通用字体的标准：body {
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}照抄

第二调整文字位置方法：

1.设置p字体 颜色

2.设置h4margin值

3.设置四个盒子的padding值

第四步复制往四个盒子里面套图片与文字的方法四遍，代码如下：

<div class="tb">
<div class="container">
<h2 class="tb_1">台风“帕卡”来临 广东多条高速双向入口封闭</h2>
<p class="tb_2">中新网广州8月27日电 (蔡敏婕)今年第14号台风“帕卡”于27日9时许在广东省台山市东南部沿海登陆。</p>
<div class="row">

<!--第一个盒子-->
<div class="col-md-6 col row_a">
<div class="media">
<div class="media-left">
<a href="##"><img src="img/tab1-1.png" /> </a>
</div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
</div>
</div>
</div>
<!--第2个盒子-->
<div class="col-md-6 col">
<div class="media">
<div class="media-left">
<a href="##"><img src="img/tab1-1.png" /> </a>
</div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
</div>
</div>
<!--第3个盒子-->

<div class="col-md-6 col">
<div class="media">
<div class="media-left">
<a href="##"><img src="img/tab1-1.png" /> </a>
</div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
</div>
</div>
</div>
<!--第4个盒子-->
<div class="col-md-6 col">
<div class="media">
<div class="media-left">
<a href="##"><img src="img/tab1-1.png" /> </a>
</div>
<div class="media-body">
<h4 class="media-heading">课程内容</h4>
<p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
<p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
</div>
</div>
</div>

</div>

</div>

第五步 我们在谷歌的移动页面里调试时，发现字体的大大，那么怎么兼容这个问题n？

这个问题马上要联想@Media媒体查询来解决，现在考虑有几种情形如下：

/* 小屏幕（平板，大于等于768px）你在手机上看到屏幕 */

@media (min-width: 768px) {
.tab-h2 {
font-size: 26px;
}
.tab-p {
font-size: 16px;
}
}


/* 中等屏幕（桌面显示器，大于等于992px   你在用电脑时看到网页） */
@media (min-width: 992px) {
.tab-h2 {
font-size: 28px;
}
.tab-p {
font-size: 17px;
}
}


/* 大屏幕（大桌面显示器，大于等于1200px）你在用电视时看到网页*/
@media (min-width: 1200px) {
.tab-h2 {
font-size: 30px;
}
.tab-p {
font-size: 18px;
}

前端bootstarp思考问题的方法：

第一步  先做大盒子

第二步   把大盒子按照栅格系统来分n个盒子

第三步   先解决一个盒子的布局，再copy1个盒子的做法于n个盒子之中

第四步   利用媒体查询来解决盒子里面放的元素的大小问题