Bootstrap 响应式布局(栅格系统) - bootstrap教程

Bootstrap 响应式布局


  • Bootstrap 栅格系统简介

    栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它...

    2014-12-17 14:29:25
    • Bootstrap 媒体查询

      媒体查询在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。 *超小屏幕(手机,小于768px)*...

      2014-12-17 14:23:08
      • Bootstrap 栅格参数

        栅格参数通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。超小屏幕 手机 (<768px)小屏幕 平板 (&ge;768px)...

        2014-12-17 14:35:18
        • 栅格实例:从堆叠到水平排列

          实例:从堆叠到水平排列使用单一的一组 col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超...

          2014-12-17 14:39:11
          • 栅格实例:流式布局容器

            实例:流式布局容器将最外面的布局元素 container 修改为 container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。<d...

            2014-12-17 14:44:22
            • 栅格实例:移动设备和桌面屏幕

              实例:移动设备和桌面屏幕是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 col-xs-*...

              2014-12-17 14:45:34
              • 栅格实例:手机、平板、桌面

                实例:手机、平板、桌面在上面案例的基础上,通过使用针对平板设备的 col-sm-* 类,我们来创建更加动态和强大的布局吧。 col-xs-12 co...

                2014-12-17 14:39:37
                • 栅格实例:多余的列(column)

                  实例:多余的列(column)将另起一行排列如果在一个 row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元...

                  2014-12-17 14:48:26

Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)