栅格系统

最新推荐文章于 2020-05-13 15:52:16 发布
最新推荐文章于 2020-05-13 15:52:16 发布
阅读量399 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loganpython/article/details/70183446
版权
<!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, maximum-scale=1, user-scalable=no">
        <meta name="author" content="大圣">
        <title>栅格系统</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .container div:nth-of-type(2n+1){
                border: 1px solid black;
                background-color: red;
            }
            .container div:nth-of-type(2n){
                background-color: orange;
                border: 1px solid black;
            }
            
        </style>
    </head>
    <body>
        
      <h2 class="text-center"> bootstrap的栅格元素是浮动的</h2>  
      <div class="container">
          <div class="col-xs-6">1</div>
          <div class="col-xs-6">2</div>
          <!--<div class="col-xs-6">3</div>-->
      </div>


      <h2 class="text-center">栅格系统中心的col-*-*</h2>
      <div class="container">
          <!--col-*-*用来设置元素在一行12列内所占的份数。
          第一个*号：代表针对哪一种屏幕尺寸。
          第二个*号：代表在该尺寸的屏幕内元素所占的份数。-->
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">1</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">2</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">3</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">4</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">5</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">6</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">7</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">8</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">9</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">10</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">11</div>
          <div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">12</div>
          
      </div>


      <h2 class="text-center">栅格的列偏移offset</h2>
      <div class="container">
          <!--col-*-offset-* 用来设置列偏移。
          第一个*号代表针对的屏幕尺寸
          第二个*号代表偏移的单位。-->
          <div class="col-md-3 col-md-offset-3">
              <h3>HTML</h3>
              <p>HTMLHTML5，超文本标记语言(HyperText Markup Language).它是目前前端开发技术的总称。</p>
          </div>
          <div class="col-md-3">
                    <h3>CSS3</h3>
                    <p>CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</p>
                </div>
                <div class="col-md-3">
                    <h3>JavaScript</h3>
                    <p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
                </div>
                <div class="col-md-3">
                    <h3>Python</h3>
                    <p>Python是一种面向对象的解释型计算机程序设计语言，由荷兰人Guido van Rossum于1989年发明，第一个公开发行版发行于1991年。</p>
                </div>
      </div>


      <h2 class="text-center">栅格的列排序push 和pull</h2>
      <!--col-*-*-*用来设置栅格元素的位移。通常用来进行位置交换。
      第一个*号：略。
      第二个*号：push/pull.push右移。pull左移。
      第三个型号：位移的单位数。-->
      <div class="container">
          <div class="col-md-3 col-sm-6 col-md-push-3">
              <h3>HTML5</h3>


          </div>
          <div class="col-md-3 col-sm-6 col-md-pull-3">
                    <h3>CSS3</h3>
                    <p>CSS即层叠样式表（Cascading StyleSheet）。</p>
            </div>
            <!--清除浮动产生的错乱-->
            <div class="clearfix visible-sm"></div>
            <div class="col-md-3 col-sm-6">
                <h3>JavaScript</h3>
                    <p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
                
            </div>
             <div class="col-md-3 col-sm-6">
                    <h3>Python</h3>
                    <p>Python是一种面向对象的解释型计算机程序设计语言，由荷兰人Guido van Rossum于1989年发明，第一个公开发行版发行于1991年。</p>
                </div>
      </div>


        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
DaSheng1104
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解css栅格系统在项目中的灵活运用
12-14
css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。 需求 UI设计了如下布局，其中左上角橙色部分是固定的，蓝色部分是动态渲染的，从...
bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
09-25
Bootstrap 3.0 的栅格系统是网页布局设计的核心组件，它允许开发者创建响应式、灵活的页面结构。本教程将深入讲解 Bootstrap 栅格系统的各个关键知识点。 1. **栅格选项**： Bootstrap 栅格系统基于 12 列布局。它...
CSS：Bootstrap-Button
Schon_zh的博客
10-29 264
样式 &amp;amp;amp;amp;lt;!-- Standard button --&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;button type=&amp;amp;amp;quot;button&amp;amp;amp;quot; class=&amp;amp;amp;quot;btn btn-default&amp;amp;amp;quot;&amp;amp;amp;amp;gt;（默认样式
bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义
lzf的博客
05-24 1490
摘要: bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义：.col-xs-*超小屏幕手机(768px),.col-sm-*小屏幕平板(≥768px),.col-md-*中等屏幕桌面显示器 首先说明： 1、col-列； 2、xs-maxsmall，超小；sm-small，小；md-medium，中等； 3
你用过栅格系统吗？如果使用过，你最喜欢哪种？
xujie_0311的专栏
12-30 2304
Bootstrap中的流式布局；Bootstrap提供了两种布局方式，固定式布局和流式布局方式，Bootstrap的布局实际上是在栅格外加个容器(container)，因此两种布局方式的唯一区别是：固定布局加的是固定宽度(width)的容器，流式布局加的是自适应(或叫可变)宽度的容器。 1.固定布局 body>        div class="container">
实现一个简单的栅格系统
Preeminent
04-16 6243
实现一个简单的栅格系统关于栅格系统相信大家都用过 Bootstrap （神马！你没用过？这么流行你还不快去试试），栅格系统就是 Bootstrap 的核心，现在许多 UI 库中也增加了对栅格系统的支持。栅格系统是通过对元素增加各种不同的类名从而在不同的屏幕宽度下实现不同的效果，从而实现响应式的功能。前言今天，我自己模仿实现了一个简单的栅格系统，戳这里看效果，看起来栅格系统很高大上，其实栅格系统的实现
栅格系统与版式设计
08-31
栅格系统与版式设计是现代平面设计中的重要组成部分，尤其在文字版式的排版上扮演着关键角色。栅格系统，简单来说，就是一种将页面划分成等份的虚拟结构，它可以帮助设计师更好地组织版面的元素，确保设计的整体性和...
bootstrap3.0教程之栅格系统原理(布局)
01-19
栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的...
col-xs , col-sm , col-md , col-lg的理解
热门推荐
liyang_nash的专栏
07-23 14万+
转自:https://www.cnblogs.com/sdusrz/p/7170564.html 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义： .col-xs- 超小屏幕 手机 (&lt;768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- ...
Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法
知行合一，跬步致远
03-24 7万+
概括 一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。 关键字 1、col是column简写：列； 2、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （&lt;768px）时使用；     ...
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
谙忆-陈浩翔
05-13 5812
转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 栅格系统1、栅格系统介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。Bootstrap的栅格系统，由一个行(.row)和多个列构成。栅格系统用于通过一系列的行（row）与列（column）的组
bootstrap里col-xs , col-sm ,col-md,col-lg的区别
weixin_38383877的博客
07-28 6081
前言         对于一些初学boostrap的同学来说，肯定也像我一样傻傻的搞不懂col-××-*都是要怎么使用吧，我刚开始也表示一脸懵逼，后来查阅了这篇文章才搞懂了他们之间的区别，我整理了一下供大家一起学习。 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义： .col-xs-* 超小屏幕 手机 (&lt;76...
删格系统的实现原理
sunnyboysix的博客
05-14 753
栅格系统的实现原理很简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询。.col-xs- 超小屏幕 手机 (&lt;768px)                            小于 768px 的时候，用 col-xs-12 类对应的样式；.col-sm- 小屏幕 平板 (≥768px)                              在 768px 到 ...
监理内业资料和表格使用（83页）.doc
最新发布
08-31
监理内业资料和表格使用（83页）.doc
SQLAlchemy-2.0.31-cp37-cp37m-win_amd64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
单片机资料c源码数码管动态扫描单片机资料c源码数码管动态扫描
08-31
单片机资料c源码数码管动态扫描单片机资料c源码数码管动态扫描提取方式是百度网盘分享地址
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值