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,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
随机推荐
- docker mysql 命令导入sql数据文件
1.查看mysql容器 docker ps 比如我的是:94df84cbaaaa 2.复制sql文件到docker mysql里面的tmp文件夹 docker cp ./admin.sql 94df8 ...
- ThinkPHP5实用的数据库操作方法
1.update方法总结 /** * 设置记录的某个字段值 * 支持使用数据库字段和方法 * @access public * @param string|array $field 字段名 * @pa ...
- KMP2
poj 2752 #include<stdio.h> #include<iostream> #include<algorithm> #include<stri ...
- webapi 给自己挖的坑
这次做项目,负责开发web api. 自己给自己挖了个坑.在所有的api接口前面都加上一个static . 结果检查路由配置.代码等等都找不到问题所在. 最后在一个同事的提醒下,原来是static给惹 ...
- Vuex 源码解析
先来看一下这张Vuex的数据流程图,熟悉Vuex使用的同学应该已经有所了解. Vuex实现了一个单向数据流,在全局拥有一个State存放数据,所有修改State的操作必须通过Mutation进行,Mu ...
- $router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...
- MYSql 存储过程自定义跳出
MYSql存储过程自定义跳出 我们有时会在存储过程中进行一些判断,当判断条件达成时候我们有时会直接跳出存储过程. 但是存储过程不支持return直接返回的操作, 所以我们只能采用另一种方法,'leav ...
- robotframework+python3+selenium之创建第一个项目---第三集
1.新建一个project 选择Directory,则是文件夹 2.选择文件,创建new suite test_1 3.创建test case baidu_test 4.此时界面如图: 5. ...
- 继承中的隐藏（hide）重写（Override）和多态（Polymorphism）
继承中的隐藏:(不要使用隐藏,语法没有错误但是开发项目时会被视为错误) 在继承类中完全保留基类中的函数名 //基类,交通工具 class Vehicle { public void Run() { C ...
- 【NIO】NIO之浅谈内存映射文件原理与DirectMemory
Java类库中的NIO包相对于IO 包来说有一个新功能是内存映射文件,日常编程中并不是经常用到,但是在处理大文件时是比较理想的提高效率的手段.本文我主要想结合操作系统中(OS)相关方面的知识介绍一下原 ...