`

BootstrapCSS之 Grid System 学习

阅读更多
使用 BoostrapCSS 根据页面宽度自适应的CSS类
Responsive Breakpoint Classes

1、BoostrapCSS 宽度自适应的行为:
BoostrapCSS 是如何做到宽度自适应的?或 什么是 BoostrapCSS 的宽度自适应?
即:当页面宽度达到或小于规定的数值时,每一列宽度将会变为 页面宽度的 100% 。

2、共5个宽度级别的自适应类。

To make the grid responsive, there are five grid breakpoints,
one for each responsive breakpoint:



.col-
    - (suits for) all breakpoints (extra small),
      For grids that are the same from the smallest of devices to the largest,
      use the .col and .col-* classes.

.col-sm-
    - small,
      Only breaks on small device's width of: 540px

.col-md-
    - medium,
      Only breaks on medium device's width of: 720px

.col-lg-
    - large,
      Only breaks on medium device's width of: 960px

.col-xl-
    - extra large
      Only breaks on medium device's width of: 1140px





我最常用的是: .col-md- 级别








转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2429121








引用:
https://getbootstrap.com/docs/4.1/layout/grid/









分享到:
评论

相关推荐

    960-Grid-System

    - **前端框架**:960 Grid System的理念被许多现代前端框架所借鉴,如Bootstrap、Foundation等,它们在此基础上进行了更丰富的功能扩展。 - **移动优先**:尽管960 Grid System起源于桌面设计,但现在可以通过移动...

    Bootstrap3 Grid system原理及应用详解

    在实际应用中,Bootstrap3 Grid System通过CSS媒体查询(Media Queries)来实现响应式布局。例如,`.col-md-4`的宽度在不同屏幕宽度下的变化是由以下CSS代码控制的: ```css // 其他.col-md-.col-md-4 { width: 33....

    960 Grid System 源代码

    学习960 Grid System 的好处在于它可以提高设计效率,减少设计与开发之间的沟通成本。然而,随着响应式设计的发展,现代网页设计趋势更倾向于灵活的流式布局,如Bootstrap等前端框架。尽管如此,960 Grid System ...

    bootstrap相关css和js

    其核心特性包括栅格系统(Grid System),用于创建灵活的二维布局;预定义的类(Predefined Classes)用于快速调整元素样式,如文本对齐、颜色和间距;以及可定制的组件样式,如导航条(Navbar)、下拉菜单...

    960-Grid-System-master 960格设计

    "960-Grid-System-master"是这个设计系统的代码库或资源包,通常包含CSS、HTML和其他相关文件,方便开发者使用。 960格设计的核心理念是将网页宽度设定为960像素,这确保了在不同分辨率的屏幕下都能有良好的显示...

    bootstrap.min.js+bootstrap.css

    `bootstrap.css`则是Bootstrap的CSS文件,它定义了Bootstrap的样式规则,包括栅格系统(grid system)、排版(typography)、表单(forms)、按钮(buttons)、表(tables)、图像(images)、代码(code)以及各种...

    react-grid-system:用于React的功能强大的类似Bootstrap的响应式网格系统

    react-grid-system v7为超大屏幕添加了新的屏幕类xxl 。 这可能会对您的应用造成影响。 要退出此新屏幕类别,请使用以下命令: import { setConfiguration } from 'react-grid-system' ; setConfiguration ( { ...

    bootstrap学习资料总结,内附源码

    Bootstrap是世界上最受欢迎的前端开发框架之一,主要用于快速构建响应式和移动优先的网站。这个学习资料总结涵盖了Bootstrap的核心概念、组件以及如何将其应用于web开发,尤其是移动设备的优先设计。 一、Bootstrap...

    bootstrap学习案例-deker机器人网站

    响应式设计是Bootstrap的核心特性之一,它通过预定义的栅格系统(Grid System)实现。在Bootstrap中,页面被划分为12列,根据不同屏幕尺寸(如手机、平板、桌面)自动调整布局,实现内容在各种设备上的最佳展示。...

    960grid 用于前端布局

    1. **CSS 文件**:960 Grid System 的核心是 CSS 文件,它定义了不同数量的列(如12列或16列)及其相应的样式。例如,`.container` 类定义了整体容器,`.grid_1` 至 `.grid_12` 定义了不同数量的列。开发者可以根据...

    bootstrap布局可视化可拖拽

    Bootstrap的基础布局系统依赖于网格(Grid System),它将页面宽度划分为12列,允许灵活的栅格布局。通过类`.container`、`.container-fluid`定义容器,再利用`.row`类来组织行,并在行内嵌套`.col-*-*`类的列,可以...

    Bootstrap v3.2 css框架 包含HTML5.JS

    4. **Grid System**:Bootstrap的网格系统是其布局设计的核心,它基于12列的响应式布局。开发者可以通过定义`.col-md-*`类来创建自适应的列,使得内容能够在不同屏幕尺寸下自动调整布局。 5. **Components**:...

    北大青鸟 Bootstrap 微票儿 项目_学习部

    在微票儿项目中,开发者可能利用Bootstrap的栅格系统(Grid System)来调整元素的排列和大小,以适应不同分辨率的设备。 3. **标准排版**:Bootstrap提供了统一的排版样式,如字体、行高、颜色和对齐方式等,以确保...

    Bootstrap for Rails

    It teaches you how to set up the Bootstrap framework, and will showcase the true power of your Rails app using Bootstrap's grid system. You will learn about other Bootstrap components and move on to ...

    bootstrap-4.5.2-dist.zip

    1. **响应式设计**:Bootstrap的核心特性之一就是响应式布局,它使用媒体查询(Media Queries)和栅格系统(Grid System)来确保网站在不同设备上(如手机、平板、桌面电脑)都能自适应显示。Bootstrap的栅格系统...

    bootstrap相关组件文件全集

    6. **响应式布局**:Bootstrap的网格系统(Grid System)基于12列的布局,通过`.col-*-*`类,可以轻松创建响应式的布局,适应不同屏幕尺寸的设备。 7. **移动优先**:Bootstrap的设计理念是移动优先,意味着首先为...

Global site tag (gtag.js) - Google Analytics