专栏首页知道一点点bootstrap快速入门笔记(三)响应式,行,列,偏移量,排序

bootstrap快速入门笔记(三)响应式,行,列,偏移量,排序

一,响应式列重置 .clearfix

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

二,列偏移、使用.col-md-offset-*此类可以将列向右偏移。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
效果:
三,嵌套列:为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-*元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
四,列排序:通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap快速入门笔记(二)-栅格系统,响应式类

    1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列

    用户3055976
  • 八种创建等高列布局【出自w3c】

    高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

    用户3055976
  • 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 内联表单</title> <link hre...

    用户3055976
  • BootStarp常用标签

    用户5927264
  • Bootstrap响应式前端框架笔记一——强大的栅格布局

        Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使用。Boot...

    珲少
  • 根据select下拉框值判断验证条件

    根据select下拉框值判断当前选中的是哪个区域,并且判断当前选中区域里面的值是否为空,如果为空,则弹出弹框提示,请输入xx区域名称,以下只是一个小demo,随...

    祈澈菇凉
  • 想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)

    MarkDown,写作神器,还是有必要掌握一下。写作也是一种很重要的能力,需要长久坚持和锻炼。

    特立独行的猫a
  • 09 Confluent_Kafka权威指南 第九章:管理kafka集群

    Kafka提供了几个命令行接口实用程序,他们对于kafka集群的配置管理非常有用。这些工具是通过java来实现的,并提供了一组脚本来调用这些类。这些工具提供了基...

    冬天里的懒猫
  • Python - 编码问题

    Mitchell
  • mysql的"双1设置"-数据安全的关键参数(案例分享)

    mysql的"双1验证"指的是innodb_flush_log_at_trx_commit和sync_binlog两个参数设置,这两个是是控制MySQL 磁盘写...

    洗尽了浮华

扫码关注云+社区

领取腾讯云代金券