以下是一个基本的HTML框架布局实例代码,使用Bootstrap框架:
<!DOCTYPE html> <html lang="en"> <head> <title>页面标题</title> <!-- Bootstrap 样式表链接 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!-- 左侧栏 --> </div> <div class="col-md-8"> <!-- 主内容区 --> </div> </div> </div> <!-- Bootstrap JavaScript 库链接 --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
在这个示例中,我们使用了Bootstrap框架来实现响应式的两栏布局。具体地:
.container
容器是响应式的,用于包含整个网页。.row
行表示一行,包含两列:左侧栏和主内容区。.col-md-4
表示左侧栏,使用Bootstrap网格系统,宽度为4列(总共12列)。.col-md-8
表示主内容区,使用Bootstrap网格系统,宽度为8列(总共12列)。
在这个布局中,左侧栏和主内容区都可以包含任何有效的HTML元素。可以使用Bootstrap提供的样式和组件来创建更复杂的页面布局,并且在不同大小的设备上都能自适应地展现。
评论