How to use bootstrap layout

Bootstrap layout is a front-end framework that provides reusable components to simplify responsive web development. Its layout system is based on a 12-column grid, using .row and .col- classes to create rows and columns. The response class (.col-{size}-{cols}) can adjust the column size according to the device size. The alignment class (.text-) is used to align elements, and the offset class (.offset-*) can offset the columns from the beginning of the grid.

Bootstrap Layout: Guide

What is a Bootstrap layout?

Bootstrap is a popular front-end framework that provides a set of reusable HTML and CSS components designed to simplify the development of responsive web pages. Its layout system enables developers to easily create grid-based web pages.

Layout with Bootstrap

To use Bootstrap layout, you need:

1. Include the Bootstrap library:

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"></code>

2. Use the grid system:

The Bootstrap grid system consists of a row and 12 columns. You can create rows and columns using .row and .col-* classes.

 <code class="html"><div class="row"> <div class="col-sm-6">内容</div> <div class="col-sm-6">内容</div> </div></code>

3. Specify the response size:

Bootstrap provides a response class to respond to different device sizes. Use a class in the form of .col-*-* , where and represent the device size and column size respectively.

 <code class="html"><div class="col-md-4">内容（在中型设备上占4 列）</div></code>

4. Align elements:

You can align elements with .text-* class, such as .text-left , .text-center , .text-right .

 <code class="html"><p class="text-center">居中文本</p></code>

5. Offset Column: The .offset-*` class allows you to offset the start of the column relative to the grid.

 <code class="html"><div class="offset-md-4">内容（在中型设备上从第5 列开始）</div></code>

Sample layout

Here is a simple layout example:

 <code class="html"><div class="container"> <div class="row"> <div class="col-sm-3">侧边栏</div> <div class="col-sm-9">正文区域</div> </div> </div></code>

This layout shows a 3-column sidebar and a 9-column main area on the smaller screen, while a 4-column sidebar and an 8-column main area on the larger screen.

The above is the detailed content of How to use bootstrap layout. For more information, please follow other related articles on the PHP Chinese website!