1.Bootstrap使用(布局容器,栅格网格系统,【列组合与列偏移,列排序与列嵌套】)

<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式- ->
<meta http-equiv="X-UA-Compatib1e" content= "IE=edge">
<!--
 viewport表示用户是否可以缩放页面;
 width指定视区的逻辑宽度;
 device-width指示视区宽度应为设备的屏幕宽度;
 initial-scale指令用于设置Web页面的初始缩放比例
 initial-scale=1 则将显示未经缩放的Web文档 
-->
<meta name= "viewport" content= "width=device-width, initial-scale=1">
    如果要使⽤Bootstrap的js插件,必须先调用 jQuery.js  
  1. viewport 标记于指定用户是否可以缩放Web页面
  2. width 和 height 指令分别指定视区的逻辑宽度和宽度。他们的值要么是以像素为单位的数字,要么是个特殊的标记符号。
  3. width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
  4. height 指令使用 device-height 标记指示视区宽度为设备的屏幕 宽度。
  5. initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
    1.布局容器       .container 类用于固定宽度并支持响应式布局的容器(网页两侧留白)
 <div class="container"> ... </div>
    .container-fluid 类用于 100% 宽度,占据全部视口 (viewport) 的容器(网页两侧不留白)  
<div class="container-fluid"> ... </div>

 

2.栅格网格系统     Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。   栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。   Bootstrap框架中的网格系统就是将容器平分成12份
<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>
注意:
  1. 行(row)必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中
  2. 具体内容应该放置在列容器 (column) 之内
  3. col- 屏幕尺寸-列数,其中屏幕尺寸有
            xs(xsmall phones) 超小屏(自动)             sm(small tablets) 小屏(750px)             md(middle desktops) 中屏(970px)             lg(larger desktops) 大屏(1170px)  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
 
<body>
    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
            <div class="col-md-4" >4列</div>
            <div class="col-md-8" >8列</div>
        </div>
    </div>
</body>
 
</html>
  3.列组合          列组合简单理解就是更改数字来合并列(原则:列总和数不能超12,大于12则自动换到下一行),有点类似于表格的 colspan 属性     4.列偏移     如果我们不希望相邻的两个列紧靠在一起,但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。   使用列偏移也非常简单,只需要在列元素上添加类名 "col-md-offset-*" (星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。   例如,你在列元素上添加 "col-md-offset-8" ,表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12,不然会导致列 断行|换行 显示)   5.列排序     * 列排序就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。   * 在 Bootstrap 框架的网格系统中是通过 添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)   * 左浮动往前 pull ,右浮动往后 push   6.列嵌套     列嵌套:你可以在一个列中添加一个或者多个行(row) 容器,然后在这个行容器中插入列。  
上一篇:终于。。Spring Cloud 2021 正式发布,一大波更新,看完我彻底躺平了。。.md


下一篇:Typora默认图片保存位置的更改