欢迎来到小钟的博客！

什么是Bootstrarp框架？

  • bootstrarp是一个写网页的框架 就是说你只需要写HTML标签然后调用它提供的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！
  • 用它提供的样式和组件快速写网站
  • Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
  • 里面创建了很多样式或者组件供你使用

使用Bootstrarp框架的步骤：

  1. 到bootstrarp官网下载bootstrarp相关文件：

  2. 创建文件夹结构：

    bootstrarp文件夹.png

  3. 打开HTML文件 引入下载好的bootstrarp相关文件：

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  1. 书写你的网页内容

Bootstrarp框架的栅格系统：

超小屏幕（手机）<768px 小屏设备（平板）>=768px 中等屏幕（桌面显示器）>=922px 大屏屏幕（大桌面显示器） >=1200px
.container 最大宽度 自动（100%） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12 12 12 12

  • Bootstrarp提供了一套响应式，移动设备优先的流式栅格系统 ，随着屏幕或视口尺寸的增加，

    系统会自动分为最多12列

  • 行（row）必须放在container布局容器里面

  • 通过行（row）在水平方向创建一组列（column） 你的内容应当放在列（column）内

  • 一行最多分成12列 超过的则在下一行显示

  • 实现列的平均划分 需要给列添加类前缀

  • 可以同时为一列指定多个设备的类名，以便划分不同的份数 例如 class=”col-xs-12 col-md-2 col-lg-3”

  • 每一列默认有15px的padding

例子：

<!--------大屏幕的时候 一列占3份  中等屏幕的时候 一列占4份  平板的时候 一列占6份  手机的时候 一列占12份------->	
 <style>
     .row{
         margin-top:50px;
     }
        .container .row div {
            border: 1px solid salmon;
        }
    </style>
  <!-----------container容器-->
    <div class="container">
        <!------------一行-->
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
    </div>

效果图：

5Q4lNT.png