bootstrap布局

最新推荐文章于 2024-05-21 09:45:36 发布
最新推荐文章于 2024-05-21 09:45:36 发布
阅读量384 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41042671/article/details/79596963
版权 
<!-- 一共是 12份
    col-sm
    col-md
    col-lg-1
    col-xl-1 -->

    <!-- @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } -->
布局，屏幕效果 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style media="screen">
      .container{
        border:1px solid #888;
      }

      .row{
        min-height: 120px;
        background-color: #eee;
      }

      [class*=col]{
        background-color: blue;
        margin:5px;
      }
    </style>
  </head>
  <body>

    <!-- bootstrap布局 -->

    <div class="container">
      <div class="row">
        <!-- 会维持原有秩序不会变 -->
        <div class="col-1">占12分之1</div>
        <div class="col-2">12分之2</div>
        <div class="col-1"></div>

      </div>

      <div class="row">
        <!-- 屏幕小于 768时会变成横排展示 -->
        <div class="col-md-2"></div>
        <div class="col-md-4"></div>
        <div class="col-md-1"></div>

      </div>

      <div class="row">
        <!-- 屏幕小于 576时会变成横排展示 -->
        <div class="col-sm-2"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-1"></div>

      </div>

      <div class="row">
        <!-- 大于768受md控制，576-768受sm控制。 -->
        <div class="col-sm-2 col-md-5"></div>
        <div class="col-sm-4 col-md-2"></div>
        <div class="col-sm-1 col-md-3"></div>

      </div>
    </div>





  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  </body>
</html>

布局例子-自适应，固定侧栏等

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style media="screen">
      .container{
        border:1px solid #888;
      }

      .row{
        min-height: 200px;
        background-color: #eee;
      }

      .row .row{
        /* min-height: 200px; */
        background-color: yellow;
      }

      [class*=col]{
        background-color: blue;
        margin:5px;
      }
    </style>
  </head>
  <body>

    <!-- bootstrap布局 -->

    <div class="container">
      <div class="row">
        <div class="col-1" style="min-width:200px">固定左侧</div>
        <div class="col">自适应
          <div class="row">
            <div class="col"></div>
            <div class="w-100">
              可以分隔开
            </div>
            <div class="col"></div>

          </div>

        </div>
        <div class="col-1" style="min-width:150px">固定右侧</div>

      </div>

      <div class="row">
        <div class="col-1" style="min-width:200px">固定左侧</div>
        <div class="col-1" style="min-width:150px">固定</div>
        <div class="col">自适应</div>

      </div>

    </div>



  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> -->

  </body>
</html>


satya1
关注
bootstrap布局基础
weixin_55743273的博客
11-10 2597
文章目录一、bootstrap布局1.什么是bootstrap布局2.布局容器3.使用方法二、栅格系统1.栅格系统2.栅格选项参数2.1 份数相加结果出现的情况2.1.12.1.22.1.33.响应式工具总结 一、bootstrap布局 1.什么是bootstrap布局 Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，提供了优雅的HTML和CSS规范，由动态CSS语言Less写成。 2.布局容器 boots
bootstrap各种布局模板(html文件)
12-08
bootstrap各种布局模板(html文件)。下载后解压，打开文件夹找到index.html文件查看。然后根据自己想要的在文件夹中找到对应的文件用编辑器打开查看即可。
Bootstrap弹性页面布局
weixin_44549995的博客
05-17 2241
Bootstrap弹性页面布局 所谓的弹性布局就是适应多款浏览器 不同的宽度布局的显示相对来说占的百分比是一样的 甚至宽度不足时还会自动换行剩余元素等分空间 使得页面布局在不同的浏览器中显示不混乱 在这里我要讲的是利用bootstrap插件进行弹性布局 Bootstrap布局是给元素添加封装好样式的类名 弹性布局第一步布局是给最外层的元素添加类名container-fluid container-...
bootsrap php,详解Bootstrap实现基本布局的方法
weixin_31900373的博客
03-10 144
看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。1. 创建基本的页面我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。1.1 新建一个文件， Ctrl + N1.2 保存到页面文件中，Ctrl + S，命名为 index.html1.3 在这个空白页面...
bootstrap布局:网格布局
xdd_lmd的博客
06-14 1183
网格布局 <div class="container"> <h1 class="page-header"> 布局<small>使用Bookstrap网格布局网页</small> </h1> <div class="row"> <div class="span3">dasdasdsadsadadasd
Bootstrap 的检测工具Bootlint.js
shengmeshi的博客
11-22 972
前端Bootstrap样式框架在使用的时候组件都有其固定的结构，（当然排除用户自己扩展和修改的情况），使用Bootlint.js可以帮助用户快速查找出页面上的Bootstrap组件是否符合HTML结构。 使用方法 &lt;script&gt; (function () { var s = document.createElement("script"); s...
bootstrap布局模板
08-02
在Bootstrap布局中，有几个核心概念和技术值得深入理解： 1. **栅格系统**：Bootstrap的栅格系统是其布局的核心，它基于12列的网格模型，允许开发者通过简单的类来创建响应式的页面布局。你可以通过调整列的数量和...
Bootstrap 布局组件（全）
12-12
Bootstrap 布局组件 1、Bootstrap字体图标 （1）、字体图标列表链接  http://www.mscto.com/bootstrap/bootstrap-glyphicons.html （2）、用法  如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本...
bootstrap布局设计器
08-26
总结来说，"bootstrap布局设计器"提供了一个友好的界面，让用户可以轻松创建基于Bootstrap的网页布局。通过理解Bootstrap的栅格系统、HTML结构、CSS样式和JavaScript插件，开发者或设计师可以利用这个工具快速构建...
Bootstrap 垂直标签页：创新布局的利器！
最新发布
gitblog_00098的博客
05-21 351
Bootstrap 垂直标签页：创新布局的利器！ bootstrap-vertical-tabsMissing vertical tabs component for bootstrap.项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-vertical-tabs Bootstrap，作为世界上最流行的前端框架之一，以其简洁优雅的样式和强大的可扩展...
Bootstrap布局知识点、自适应布局
weixin_47316183的博客
08-28 2042
Container：内容居中，左右两边为空 Container-fluid：内容占满整个屏幕 col-auto：内容自适应填充：内容多长，就占多长 Col：默认填充满整行 虽然数据库要尽量遵守三番式规则（就是字段尽量不重复），但在实际项目开发中，那样比较耗费性能，就直接连接一张表就能完成的事非要多连接几张表，所以使得在表中还是可以让一些字段重复出现 在模态窗体中：fade类是具有动画效果的类（淡入淡出） Data-backdrop=”static” ：取消阴影部分的关闭效果 1、在form表单中 （1）在f
第二百三十五节，Bootstrap栅格系统
weixin_34194087的博客
04-28 157
Bootstrap栅格系统   学习要点： 　　1.移动设备优先 　　2.布局容器 　　3.栅格系统   本节课我们主要学习一下 Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流 式栅格系统。   一．移动设备优先 在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏 幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 分别为：屏幕宽度...
后端小白的Bootstrap笔记 一
终极冥帝
12-23 1007
栅格系统免费小说 https://wap.kuwx.net/ 下面这张图是Bootstrap对栅格系统有关系数的规定 什么是栅格体统? 栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 1200px 一行最多盛放12列, 从上图中也能看出一共是5种响应尺寸(分别对应不同的尺寸的屏幕) 其实大白话讲 : 就是当我们用鼠标拖动浏览...
实现 Bootstrap 基本布局
weixin_34187822的博客
11-20 348
看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。 1. 创建基本的页面 我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。 1.1 新建一个文件， Ctrl + N 1.2 保存到页面文件中，Ctrl + S，命名为 index.html 1...
【Bootstrap】实现 Bootstrap 基本布局
热门推荐
bug制造者
12-08 1万+
原文地址：https://www.cnblogs.com/haogj/p/4980353.html 最终结果： 创建基本的页面 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp
bookstrap table插件
weixin_33985507的博客
09-29 140
牛逼的插件： http://www.html580.com/?oF9uwUtZ
Bootstrap的常用类(CSS和布局组件)的总结
鬼谷传人的博客
05-30 1万+
Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列)col-*-*-*:列排序(第一个*
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值