부트스트랩에는 여러 컨테이너가 있습니다-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

부트스트랩에는 여러 컨테이너가 있습니다

青灯夜游

Jan 10, 2022 am 11:28 AM

bootstrap

bootstrap에는 두 가지 유형의 컨테이너가 있습니다. 1. 고정 레이아웃 컨테이너, 기본 그리드를 "class="container"" 컨테이너에 넣어 고정 레이아웃을 만듭니다. 2. 유동 레이아웃 컨테이너, 유동 그리드를 유동 레이아웃에 넣을 수 있습니다. "class="container-fluid""를 사용하여 유체 컨테이너에 생성됩니다.

부트스트랩에는 여러 컨테이너가 있습니다

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap 컨테이너

Bootstrap에서는 컨테이너가 반응형 레이아웃의 기초입니다. 모든 콘텐츠는 컨테이너에 정의되어야 하며, 컨테이너는 부트스트랩 그리드 시스템을 활성화하기 위한 필수 전제 조건입니다.

Bootstrap은 두 가지 유형의 레이아웃 컨테이너를 제공합니다. 하나는 고정 너비 레이아웃 컨테이너이고 다른 하나는 유동 레이아웃 컨테이너입니다. 어떤 종류의 컨테이너에 그리드를 배치하면 그에 따라 레이아웃을 지정할 수 있습니다.

고정 레이아웃

Bootstrap의 기본 그리드를 class="container"인 컨테이너에 넣어 고정 너비 레이아웃을 만듭니다. 고정 레이아웃은 전체 페이지의 중앙에 위치합니다. 예:

<body>
  <div class="container">
    ...
  </div>
</body>

효과는 아래와 같습니다(Bootstrap 고정 레이아웃 컨테이너):

부트스트랩에는 여러 컨테이너가 있습니다

간단히 말하면 모든 콘텐츠를 클래스="컨테이너"로 컨테이너에 넣어 중앙에 고정된 너비의 컨테이너를 만듭니다. 레이아웃. 구체적인 예는 다음과 같습니다.

<body>
  <div class="container">
    <div class="row">
      <div class="span4">span4</div>
      <div class="span8">span8</div>
    </div>
    <div class="row">
      <div class="span3">span3</div>
      <div class="span6">span6</div>
      <div class="span3">span3</div>
    </div>
  </div>
</body>

레이아웃 효과는 아래 그림과 같습니다(Bootstrap 고정 레이아웃 예).

부트스트랩에는 여러 컨테이너가 있습니다

Flowing 레이아웃

같은 방식으로 Bootstrap의 흐르는 그리드를 클래스에 넣습니다= 흐름 컨테이너에서 "container-fluid"를 사용하면 흐름 레이아웃을 만들 수 있습니다. 유동 레이아웃은 전체 뷰포트 너비를 채웁니다. 예:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

레이아웃 효과는 아래와 같습니다(부트스트랩 흐름 레이아웃):

부트스트랩에는 여러 컨테이너가 있습니다

[관련 권장 사항: "bootstrap tutorial"]

위 내용은 부트스트랩에는 여러 컨테이너가 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

10款好看又实用的Bootstrap后台管理系统模板（快来下载）Aug 06, 2021 pm 01:55 PM

一个好的网站，不能只看外表，网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板，可以帮助大家快速建立强大有美观的网站后台，欢迎下载使用！如果想要获取更多后端模板，请关注php中文网后端模板栏目！

bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PM

bootstrap与jquery的关系是：bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站，jquery是一个兼容多浏览器的javascript库，bootstrap是基于HTML、CSS、JAVASCRIPT的。

7款实用响应式Bootstrap电商源码模板（快来下载）Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率，下面本文给大家分享7款实用响应式Bootstrap电商源码，均可免费下载，欢迎大家使用！更多电商源码模板，请关注php中文网电商源码栏目！

8款Bootstrap企业公司网站模板（源码免费下载）Aug 24, 2021 pm 04:35 PM

好看又实用的企业公司网站模板可以提高您的建站效率，下面PHP中文网为大家分享8款Bootstrap企业公司网站模板，均可免费下载，欢迎大家使用！更多企业站源码模板，请关注php中文网企业站源码栏目！

bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM

在bootstrap中，sm是“小”的意思，是small的缩写；sm常用于表示栅格类“.col-sm-*”，是小屏幕设备类的意思，表示显示大小大于等于768px并且小于992px的屏幕设备，类似平板设备。

bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AM

bootstrap modal关闭的方法：1、连接好bootstrap的插件；2、给按钮绑定模态框事件；3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。

bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PM

bootstrap默认字体大小是“14px”；Bootstrap是一个基于HTML、CSS、JavaScript的开源框架，用于快速构建基于PC端和移动端设备的响应式web页面，并且默认的行高为“20px”，p元素行高为“10px”。

bootstrap是免费的吗Jun 21, 2022 pm 05:31 PM

bootstrap是免费的；bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，开发完成后在2011年8月就在GitHub上发布了，并且开源免费。

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.