부트스트랩에 컨테이너 파일을 도입하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩에 컨테이너 파일을 도입하는 방법

下次还敢

풀어 주다： 2024-04-05 02:36:19

원래의

1251명이 탐색했습니다.

Bootstrap 컨테이너 파일은 div 행에 포함된 하나 이상의 열로 구성된 반응형 레이아웃을 만드는 데 사용됩니다. Bootstrap 컨테이너 파일을 도입하려면 다음 단계가 필요합니다. Bootstrap 설치 HTML에 컨테이너 파일 추가 컨테이너 만들기 행과 열 만들기

부트스트랩에 컨테이너 파일을 도입하는 방법

Bootstrap 컨테이너 파일 소개 방법

Bootstrap 컨테이너 파일은 유연한 반응형 레이아웃을 만드는 데 사용됩니다. , 이는 div 행으로 묶인 하나 이상의 열을 포함합니다. Bootstrap 컨테이너 파일을 도입하려면 다음 단계가 필요합니다.

1. Bootstrap 설치

NPM 사용: npm install bootstrapnpm install bootstrap
使用 CDN：https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

2. 将容器文件添加到 HTML

<code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"></code>

로그인 후 복사

3. 创建一个容器

<code class="html"><div class="container">
  <!-- 内容 -->
</div></code>

로그인 후 복사

4. 创建行和列

<code class="html"><div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- 第一列的内容 -->
    </div>
    <div class="col-sm-6">
      <!-- 第二列的内容 -->
    </div>
  </div>
</div></code>

로그인 후 복사

注意：

container 类为容器提供内边距。
row 类创建一个水平行。
col-* 类用于创建具有特定宽度和间距的列。例如，col-sm-6 创建了一个在小屏幕（sm

https://cdn.jsdelivr. net/ npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

🎜🎜🎜2. HTML🎜🎜rrreee🎜🎜3에 컨테이너 파일을 추가합니다🎜🎜rrreee🎜🎜4. . 행과 열 만들기 🎜🎜rrreee🎜🎜참고: 🎜🎜🎜🎜container 클래스는 컨테이너에 패딩을 제공합니다. 🎜🎜row 클래스는 가로 행을 생성합니다. 🎜🎜col-* 클래스는 특정 너비와 간격을 가진 열을 만드는 데 사용됩니다. 예를 들어 col-sm-6은 작은 화면(sm) 장치에서 6칸을 차지하는 열을 만듭니다. 🎜🎜

위 내용은 부트스트랩에 컨테이너 파일을 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!