当前位置: 首页 > 编程笔记 >

twitter-bootstrap Bootstrap网格层(断点)

巩阳秋
2023-03-14
本文向大家介绍twitter-bootstrap Bootstrap网格层(断点),包括了twitter-bootstrap Bootstrap网格层(断点)的使用技巧和注意事项,需要的朋友参考一下

示例

除了列单元的概念外,Bootstrap具有不同的断点或称为“层”的网格大小。Bootstrap 3网格具有四(4)层,以适应不同的屏幕(或视口)宽度。自举3层是xs,sm,md,和lg。Bootstrap的网格列由不同的col-{breakpoint}-{units}CSS类标识。

每个网格层都包含一个旨在最适合典型设备屏幕宽度的范围,例如台式机,笔记本电脑,平板电脑和智能手机。

Bootstrap使用CSS媒体查询来创建响应性断点,这些断点为每个网格大小建立边界。这些网格大小使您可以更改列的布局,以最佳地匹配不同的屏幕宽度和设备,这是响应式设计的本质。

    list-paddingleft-2">
  • col-xs-* —适用于最小屏幕宽度,例如<768 px的智能手机

  • col-sm-* —适用于较小的屏幕宽度,例如智能手机和平板电脑> = 768 px

  • col-md-* —适用于中等屏幕宽度,例如平板电脑和笔记本电脑> = 992 px

  • col-lg-* —适用于屏幕宽度,例如台式机> = 1200 px

参考:网格系统

每个设备的列宽相同

要创建始终是视口宽度(在所有设备上)的50%的列,可以col-*-6为每个层设置。

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

但是,这是不必要的额外标记,因为这col-xs-6意味着要增加6个单位xs。您设置的最小层(xs,sm或md)还定义了较大屏幕宽度的尺寸。对于所有层上相同大小的列,只需设置最小视口的宽度即可。

较短的代码:

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

每个设备的列宽不同(响应式设计)

col-*-*可以组合这些类以控制不同网格大小上的列宽。

例如,在层上创建50%宽度的列,在sm层上创建25%宽度的列md...

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

的sm,md而lg电网将所有的视口宽度“栈”垂直小于768个像素。这就是xs网格所在的地方。使用col-xs- *类的列将不会垂直堆叠,并且会继续在最小的屏幕上按比例缩小。

 类似资料:
  • 网络层相当于一个 NIO 服务,在此不在详细描述. sendfile(零拷贝) 的实现是通过 MessageSet 接口的 writeTo 方法完成的.这样的机制允许 file-backed 集使用更高效的 transferTo 实现,而不在使用进程内的写缓存.线程模型是一个单独的接受线程和 N 个处理线程,每个线程处理固定数量的连接.这种设计方式在其他地方经过大量的测试,发现它是实现简单而且快速

  • 二层网络对应物理网络中的一个广播域,具有网络隔离的作用。 二层网络对应物理网络中的一个广播域。一个广播域内的主机可以进行二层通信,无需通过三层设备进行转发,一个二层网络可以配置多个IP子网。 二层网络定义了一个广播域的边界,IP子网则定义了一个二层网络内可以分配的IP地址池。 二层网络来源: 同步ZStack和DStack平台上的二层网络。 云管平台控制节点安装完成后初始化引导时创建属于 云联壹云

  • 我试图在Repast Java Suite中编写一个ABM,并使用3D网格来实现。关于网格的两个问题:1)我想为网格中的每个(x,y)组合分配一个函数值——例如,对于每个f(x,y)=xy。因此,当代理位于点(x,y)时,它将知道相应的z值是z=f(x,y)=xy。我如何为网格分配一个数据层来实现这一点? 2)同样对于同一个网格,代理应该能够知道是否访问了特定的补丁。每当代理访问该补丁时,它都会更

  • 网关层 特点:最外层网关需要高性能、支持高并发。 Go语言实现Gateway,方便定制 Kong(nginx+lua基于nginx) Traefik(Go实现的,性能不如nginx) 服务聚合层 特点:需要快速开发应对外部业务的多变,调用基础服务即可。io较密集,建议使用异步框架。 GroupCo (php的异步协程框架,php的快速开发与异步协程的支持并发) 基础服务层 特点:基础服务要求稳定,

  • 我们正在使用一种标准的 12 列的流式响应式网格系统。网格布局可以帮助你设计一个有序的简单时尚的页面。 Container container 类不是网格系统最严格的一部分,但是是内容布局重要的一部分。它可以使你的页面内容居中。 container 类的宽度被设置为窗口的 70% 左右。它使你的页面内容居中并包含在内。我们用 container 类来包含我们的 body 内容。 增加一个 cont

  • float 网格适合多行 <ul class="ui-row"> <li class="ui-col ui-col-50">50</li> <li class="ui-col ui-col-50">50</li> <li class="ui-col ui-col-25">25</li> <li class="ui-col ui-col-75">75</li>