(代码可运行)Bootstrap框架的HTML示例

Bootstrap:一套流行的前端开发框架,基于HTML、CSS和JavaScript,适用于快速构建响应式Web应用。

以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Exampletitle>
    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5/6en8XCp+HHAAK5GSLf2xlYtvJ8U2Q4U+9cuEnJoa3" crossorigin="anonymous">
head>
<body>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz4fnFO9gybBud7M4aw3bNrT5+2g0iY2z5MVzj5fcm7z5fQ9B4nD4gj5Y8" crossorigin="anonymous">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous">script>

    <div class="container">
        <h1 class="text-center mt-5">Hello, Bootstrap!h1>
        <div class="row mt-5">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card titleh5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
                        <a href="#" class="btn btn-primary">Go somewherea>
                    div>
                div>
            div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card titleh5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
                        <a href="#" class="btn btn-primary">Go somewherea>
                    div>
                div>
            div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card titleh5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
                        <a href="#" class="btn btn-primary">Go somewherea>
                    div>
                div>
            div>
        div>
    div>
body>
html>

这个示例展示了一个简单的响应式布局,包括一个居中的标题和三个卡片组件。通过使用Bootstrap的栅格系统(.container.row.col-md-4等类)和卡片组件(.card.card-body等类),可以快速构建一个美观且响应式的Web应用。请将这段代码复制到一个HTML文件中,并在浏览器中打开以查看效果。

你可能感兴趣的:(前端,CSS,html,bootstrap,前端)