<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-----固定布局解析的更多相关文章

  1. 第 31 章 项目实战-PC 端固定布局[5]

    学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...

  2. 第 31 章 项目实战-PC 端固定布局[4]

    学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门 ...

  3. 第 31 章 项目实战-PC 端固定布局[3]

    学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...

  4. 第 31 章 项目实战-PC端固定布局[2]

    学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法  ...

  5. 第 31 章 项目实战-PC端固定布局[1]

    学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...

  6. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  7. 第九十一节，html5+css3pc端固定布局，完成首页

    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...

  8. 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域

    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...

  9. 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区

    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...

  10. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

随机推荐

  1. JUC源码分析-线程池篇（三）ScheduledThreadPoolExecutor

    JUC源码分析-线程池篇(三)ScheduledThreadPoolExecutor ScheduledThreadPoolExecutor 继承自 ThreadPoolExecutor.它主要用来在 ...

  2. 第十篇 scrapy item loader机制

    在我们执行scrapy爬取字段中,会有大量的和下面的代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制 def parse_detail(sel ...

  3. 如果在vue中实现一个输入框的抖动效果？

    1. 先来理下思路? 1)抖动就是摆动,现实中的钟摆可以很形象. 2)当摆动到临界点后,就会向相反的方向摆动. 3)在没有动力时,摆动会慢慢停止. 2.用法: :start.sync 里面是抖动器名字 ...

  4. ES6数组Api扩充

    1.  Array.of( );     ----将一组数据转换成一个数组: const num=201314; const a=Array.of(num); console.log(a); //数组 ...

  5. vim 中 ctags的应用

    为了方便查询代码段中代码的最终的定义 在linux的vim便以其中可以使用ctags 使用步骤: 1. 安装 ctags :   sudo apt-get install ctags     2. 生 ...

  6. linux 磁盘与文件系统管理 （鸟哥私房菜）

    各种接口磁盘在Linux中的文件名分别为 /dev/sd[a-p][1-15]:为SCSI,SATA,USB,Flash随身碟等接口的磁盘文件名 /dev/hd[a-d][1-63]:为IDE接口的磁 ...

  7. CyberArk

    CyberArk PIM 套件由5个部分组成: · CyberArk EPV (Enterprise Password Vault)– 企业密码保险库 基于CyberArk 专利的Vault技术,为企 ...

  8. eureka多实例，模拟多台机器

    本文只有一个eureka server项目,运行在不同的端口,模拟两台eureka服务.开发使用eclipse 4.8 先说pom.xml文件,如果出现问题,首先考虑springboot和其他包版本冲 ...

  9. MongoDB启动时遇到的问题

    问题一:child process failed, exited with error number 100 原因分析:100是锁了 解决办法:#cd  /usr/local/mongodb/data ...

  10. Kotlin Download

    { https://github.com/JetBrains/kotlin/releases/tag/v1.3.50 }