写一个Bootstrap实例给大家参考一下!

Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap5 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件,助你快速设计和自定义响应式、移动设备优先的站点。

Bootstrap实例

以下是一个简单的 Bootstrap5 实例:

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一个响应式页面,重置浏览器大小查看效果!</p> 
</div>
 
<div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
        <h3>第一列</h3>
        <p>菜鸟教程</p>
        <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4">
        <h3>第二列</h3>
        <p>菜鸟教程</p>
        <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4">
        <h3>第三列</h3>        
        <p>菜鸟教程</p>
        <p>学的不仅是技术,更是梦想!!!</p>
        </div>
    </div>
</div>

本文源自菜鸟教程。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Bootstrap+CSS3+JS 网站实例,包含了主页、文章列表页和文章详情页: 主页: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Articles</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <div class="jumbotron text-center"> <h1>Welcome to My Website</h1> <p>We offer the latest news and information on various topics.</p> </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Topic 1</h3> <img src="img1.jpg" alt="Topic 1" style="width:100%; height: 200px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="col-sm-4"> <h3>Topic 2</h3> <img src="img2.jpg" alt="Topic 2" style="width:100%; height: 200px;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="col-sm-4"> <h3>Topic 3</h3> <img src="img3.jpg" alt="Topic 3" style="width:100%; height: 200px;"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div> </div> </body> </html> ``` 文章列表页: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Articles</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <div class="container"> <h2>Articles</h2> <hr> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="card"> <img class="card-img-top" src="img1.jpg" alt="Topic 1"> <div class="card-body"> <h4 class="card-title">Topic 1</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="article1.html" class="btn btn-primary">Read More</a> </div> </div> </div> <div class="col-sm-12 col-md-6"> <div class="card"> <img class="card-img-top" src="img2.jpg" alt="Topic 2"> <div class="card-body"> <h4 class="card-title">Topic 2</h4> <p class="card-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="article2.html" class="btn btn-primary">Read More</a> </div> </div> </div> </div> </div> </body> </html> ``` 文章详情页: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Articles</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <div class="container"> <h2>Topic 1</h2> <hr> <img src="img1.jpg" alt="Topic 1" class="img-fluid"> <br><br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </body> </html> ``` 注意:以上代码中的图片路径需要根据实际存放位置进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值