Bootstrap

最新推荐文章于 2022-12-05 11:40:29 发布

「已注销」

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量94

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/qq51370/article/details/109051548

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

版本

// 2.x.x 停止维护 兼容性好 代码不够简洁 功能不够完善
// 3.x.x 使用最多 稳定 放弃了IE6-IE7 对IE支持但是界面效果不好
// 偏向用于开发相应式布局 移动设备优先的web项目
// 4.x.x 最新版 不流行

创建文件夹结构

├── demo
│   ├── images
│   ├── css
│   ├── bootstrap
│   ├── index.html

下载bootstrap压缩包

// bootstrap下文件放入demo下bootstrap

bootstrap/
├── css/
├── js/
├── fonts/

html骨架

// 官网引入基本模板下html文件
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <button type="button" class="btn btn-success">登录</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

栅格系统

// Bootstrap提供一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口
// viewport尺寸的增加，系统自动分为最多12列
// Bootstrap里面container宽度固定的，但是不同屏幕下，container宽度不同
// 12等份宽度不同

// 行（row）必须放到container布局容器里面
// 实现列划分 需要给列添加类前缀
// xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；
// 列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体
// 另起一行排列
// 每一列默认有左右15像素的padding值
// 可以为同一列指定多个设备的类名，以便划分不同份数

// 超小屏幕（手机） <768px xs
// 小屏设备（平板） >=768px <992px sm
// 中等屏幕（桌面显示器） >=992px <1200px md
// 宽屏设备（大桌面显示器） >=1200px lg

<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>

列嵌套

<div class="col-md-4">
    // 加上row可以取消父元素的padding值并且高度和父级一样高
    <div class="row">
       <div class="col-md-6"></div>
       <div class="col-md-6"></div>
    </div>
</div>

列偏移

// 偏移份数 = 12 - 盒子份数和
<div class="container">
   <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4 col-md-offset-4"></div>
   </div>
</div>

列排序

// push 往右推 pull 往左拉
<div class="container">
  <div class="row">
       <div class="col-md-4 col-md-push-8"></div>
       <div class="col-md-8 col-md-pull-4"></div>
   </div>
</div>

隐藏/显示

// 超小隐藏（其余宽度显示）
.hidden-xs 

// 小隐藏（其余宽度显示）
.hidden-sm 

// 中等隐藏（其余宽度显示）
.hidden-md 

// 超大隐藏（其余宽度显示）
.hidden-lg 

<div class="container">
   <div class="row">
       <div class="col-md-4">1</div>
       <div class="col-md-4 hidden-sm">2</div>
   </div>
</div>

// 小显示（其余宽度隐藏）
.vivible-sm 

<div class="container">
   <div class="row">
       <div class="col-md-12 col-sm-4">1</div>
       <div class="col-sm-4 visible-sm">2</div>
   </div>
</div>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

版本// 2.x.x 停止维护兼容性好代码不够简洁功能不够完善// 3.x.x 使用最多稳定放弃了IE6-IE7 对IE支持但是界面效果不好// 偏向用于开发相应式布局移动设备优先的web项目// 4.x.x 最新版不流行创建文件夹结构├── demo│ ├── images│ ├── css│ ├── bootstrap│ ├── index.html下载bootstrap压缩包// bootstrap下文件放入demo下bootstrapbo
复制链接

扫一扫

专栏目录