Menu

Container
容器将内容限制为最大宽度

Download

Introduction

When To Use

容器是一种元素,设计用于根据用户屏幕的大小包含页面元素的合理最大宽度. 这对于与其他UI元素(如 grid or menu 将它们的宽度限制在合理的尺寸以供显示.

Container Sizes

容器的设计是根据它们所显示的屏幕的大小来响应地调整它们的最大宽度.

Mobile Tablet Small Monitor Large Monitor
Width 100% 723px 933px 1127px
Gutter Size 1em Fluid Fluid Fluid
Variable largestMobileScreen美元 $mobileBreakpoint smallMonitorBreakpoint美元 largeMonitorBreakpoint美元
Device Width below 768px 768px - 991px 992px - 1200px above 1200px

响应的可见性

因为语义UI的变化只在组件的范围内分配, 没有“自由浮动”的响应类名, 然而,一些组件包含响应式变体,以帮助简化响应式设计. Grid 例如,包含用于隐藏或显示的响应类 column, row 根据设备类型.

参见网格响应变化

确定最大宽度

容器在每个设备大小上显示相同的宽度. 通过确定设备断点内可用的最大设备宽度,以编程方式计算该大小, 给定所需的最小排水沟尺寸.

例如,要确定片剂容器的大小,使用以下公式:

/* In site.variables */ @tabletBreakpoint: 768 px; @scrollbarWidth : 17px; /* This is a constant */ /* In container.variables */ @tabletMinimumGutter : (@emSize * 1); /* require 1em gutter */ @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;

This is the same as 768px - (14px * 2) - 17px or 723px

调整站点断点 site.variables 若要使用自定义值,将自动调整容器宽度.

Types

Container

A standard container

Lorem ipsum dolor坐在那里,连续地喝着茶 elit. 埃涅阿斯舌线虫. Aenean massa strong. 和她的朋友们 当你怀孕时,你就会觉得很可笑 mus. 多姆,多姆,多姆,多姆,多姆 Eu, pretium quis, sem. 不会有什么后果 enim. 多尼克,朱尼尔,阿里奎特, vulputate eget, arcu. 在enim justo, rhoncus ut, 非节食a, venenatis vitae,只是. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. 365app的灵魂永远存在. Aenean vulputate eleifend tellus. 埃涅安里奥莱古拉,porttitor eu, 生命的结果,生命的结果,生命的结果. Aliquam lorem ante, Dapibus in, viverra quis, feugiat a, tellus. Phasellus 我不认识你,但我不认识你. Quisque rutrum. Aenean imperdiet. 我将给您写信. 365app已经知道了.

Text Container

容器可以减少其最大宽度,以便更自然地容纳单个文本列

与使用单一列的网格相比,文本容器是一种更简单的标记替代品, 并且设计了一个合理的最大宽度来显示流动的文本

Header

Lorem ipsum dolor坐在那里,连续地喝着茶 elit. 埃涅阿斯舌线虫. Aenean massa strong. 和她的朋友们 当你怀孕时,你就会觉得很可笑 mus. 多姆,多姆,多姆,多姆,多姆 Eu, pretium quis, sem. 不会有什么后果 enim. 多尼克,朱尼尔,阿里奎特, vulputate eget, arcu. 在enim justo, rhoncus ut, 非节食a, venenatis vitae,只是. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. 365app的灵魂永远存在. Aenean vulputate eleifend tellus. 埃涅安里奥莱古拉,porttitor eu, 生命的结果,生命的结果,生命的结果. Aliquam lorem ante, Dapibus in, viverra quis, feugiat a, tellus. Phasellus 我不认识你,但我不认识你. Quisque rutrum. Aenean imperdiet. 我将给您写信. 365app已经知道了.

Lorem ipsum dolor坐在那里,连续地喝着茶 elit. 埃涅阿斯舌线虫. Aenean massa strong. 和她的朋友们 当你怀孕时,你就会觉得很可笑 mus. 多姆,多姆,多姆,多姆,多姆 Eu, pretium quis, sem. 不会有什么后果 enim. 多尼克,朱尼尔,阿里奎特, vulputate eget, arcu. 在enim justo, rhoncus ut, 非节食a, venenatis vitae,只是. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. 365app的灵魂永远存在. Aenean vulputate eleifend tellus. 埃涅安里奥莱古拉,porttitor eu, 生命的结果,生命的结果,生命的结果. Aliquam lorem ante, Dapibus in, viverra quis, feugiat a, tellus. Phasellus 我不认识你,但我不认识你. Quisque rutrum. Aenean imperdiet. 我将给您写信. 365app已经知道了.

Variations

Text Alignment

容器可以指定其文本对齐方式

Left Aligned
Center Aligned
Right Aligned
Justified

Lorem ipsum dolor坐在那里,连续地喝着茶 elit. 埃涅阿斯舌线虫. Aenean massa strong. 和她的朋友们 当你怀孕时,你就会觉得很可笑 mus. 多姆,多姆,多姆,多姆,多姆 Eu, pretium quis, sem. 不会有什么后果 enim. 多尼克,朱尼尔,阿里奎特, vulputate eget, arcu. 在enim justo, rhoncus ut, 非节食a, venenatis vitae,只是. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. 365app的灵魂永远存在. Aenean vulputate eleifend tellus. 埃涅安里奥莱古拉,porttitor eu, 生命的结果,生命的结果,生命的结果. Aliquam lorem ante, Dapibus in, viverra quis, feugiat a, tellus. Phasellus 我不认识你,但我不认识你. Quisque rutrum. Aenean imperdiet. 我将给您写信. 365app已经知道了.

Lorem ipsum dolor坐在那里,连续地喝着茶 elit. 埃涅阿斯舌线虫. Aenean massa strong. 和她的朋友们 当你怀孕时,你就会觉得很可笑 mus. 多姆,多姆,多姆,多姆,多姆 Eu, pretium quis, sem. 不会有什么后果 enim. 多尼克,朱尼尔,阿里奎特, vulputate eget, arcu. 在enim justo, rhoncus ut, 非节食a, venenatis vitae,只是. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. 365app的灵魂永远存在. Aenean vulputate eleifend tellus. 埃涅安里奥莱古拉,porttitor eu, 生命的结果,生命的结果,生命的结果. Aliquam lorem ante, Dapibus in, viverra quis, feugiat a, tellus. Phasellus 我不认识你,但我不认识你. Quisque rutrum. Aenean imperdiet. 我将给您写信. 365app已经知道了.

Fluid

流体容器没有最大宽度

流体容器用于设置文本对齐方式或非样式内容的其他变体
Fluid

狗在人类中的角色

家狗遗传了复杂的行为, 比如咬抑制, 从他们的狼祖先那里, 哪些是有着复杂肢体语言的群体猎人. 这些复杂的社会认知和交流形式可以解释它们的可训练性, playfulness, 以及适应人类家庭和社会环境的能力, 这些特性使狗与人类建立了一种关系,使它们成为当今地球上最成功的物种之一.

狗对早期人类狩猎采集者的价值使它们迅速在世界文化中无处不在. 狗为人们扮演许多角色, such as hunting, herding, pulling loads, protection, 协助警察和军队, companionship, and, more recently, 帮助残疾人个人. 这种对人类社会的影响使它们在西方世界获得了“人类最好的朋友”的绰号. 然而,在某些文化中,狗也是肉类的来源.

Examples

容器使用网格

容器可以与网格结合使用,允许您使用所有可用的布局和对齐方式 grids 包括响应模式.

Centered Menu

容器可以在菜单中使用,以确保菜单项与页面内容内联. 使用响应性的变体,比如 stackable 菜单可以帮助调整内容以适应不同的设备大小.

Container Segment

一个容器可以和 segment

狗在人类中的角色

狗在人类中的角色

家狗遗传了复杂的行为, 比如咬抑制, 从他们的狼祖先那里, 哪些是有着复杂肢体语言的群体猎人. 这些复杂的社会认知和交流形式可以解释它们的可训练性, playfulness, 以及适应人类家庭和社会环境的能力, 这些特性使狗与人类建立了一种关系,使它们成为当今地球上最成功的物种之一.

狗对早期人类狩猎采集者的价值使它们迅速在世界文化中无处不在. 狗为人们扮演许多角色, such as hunting, herding, pulling loads, protection, 协助警察和军队, companionship, and, more recently, 帮助残疾人个人. 这种对人类社会的影响使它们在西方世界获得了“人类最好的朋友”的绰号. 然而,在某些文化中,狗也是肉类的来源.

Dimmer Message
Dimmer sub-header

友情链接: 1 2 3 4 5 6 7 8 9