bootsrap-----固定布局解析
<div class="container">
container
</div>
.container {
.container-fixed();容器的width为auto 左右padding为15 （注意是borderBox）
容器的width为750 左右padding为15 （注意是borderBox）
@media (min-width: @screen-sm-min) {
width: @container-sm;
} 容器的width为970 左右padding为15 （注意是borderBox）
@media (min-width: @screen-md-min) {
width: @container-md;
} lg大屏 w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）
@media (min-width: @screen-lg-min) {
1140+30=1700
width: @container-lg;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style type="text/css">
.container{
border: 1px solid;
height: 30px;
background: pink;
}
</style>
</head>
<body>
<!--固定容器
width >=
>= width >=
>= width >=
>= width 流体
-->
<div class="container">
container
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
container
bootsrap-----固定布局解析的更多相关文章
- 第 31 章 项目实战-PC 端固定布局[5]
学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...
- 第 31 章 项目实战-PC 端固定布局[4]
学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门 ...
- 第 31 章 项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...
- 第 31 章 项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法 ...
- 第 31 章 项目实战-PC端固定布局[1]
学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- 第九十一节，html5+css3pc端固定布局，完成首页
html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
- 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
- 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区
html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
- 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
随机推荐
- JVM 简述
JVM(Java Virtual Machine,Java虚拟机) Java程序的跨平台特性主要是指字节码文件可以在任何具有Java虚拟机的计算机或者电子设备上运行,Java虚拟机中的Java解释器负 ...
- cocos2dx 3.9 微信授权登陆后游戏进程结束解决办法
找到 Cocos2dxActivity.java 文件夹 里面的 onDestroy() 方法 if (mGLSurfaceView != null) { Cocos2dxHel ...
- Java调用Linux下的shell命令并将结果以流的形式返回
import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader; public cl ...
- 10_PAE_非PAE
前置知识: 在 windows 中 保护模式 有两种模式: 段保护 和 页保护 段保护 主要体现在 段选择子上:但是数据段.代码段.栈段等采用的都是4GB平坦模式,段的特征并没有那样展现.所以具体的保 ...
- Java—Map浅入
写支付签名的时候遇到了Map一家,就简单的比较了一下,于是乎先打印看看结果 Map<String,String> hashMap1 = new HashMap<>();hash ...
- mongo 分片集群的搭建
MongoDB版本当前使用的MongoDB版本为4.2.0,下载地址.https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.2. ...
- Box-Cox变换
简介 编辑 Box-Cox变换的一般形式为: 式中 为经Box-Cox变换后得到的新变量, 为原始连续因变量, 为变换参数.以上变换要求原始变量 取值为正,若取值为负时,可先对 ...
- GarsiaWachs算法
解决石子问题: 题目描述如下: 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1].问安排怎样的合并顺序,能够使得 ...
- jeecg问题汇总
(1)使用代码生成器后记得修改spring扫描配置路径entity,dao,control control在jeecg\src\main\resources\spring-mvc.xml中配置 ent ...
- 每天进步一点点-WPF-根据数据类型加载控件
目的,根据数据类型的不同,动态的加载适用于不同数据类型的控件(布局) 原理:为自定义的数据类型添加数据魔板,绑定的时候绑定这些数据类型的实例. 例子: 数据类型: 数据模板: <DataTemp ...