鲁达 本文介绍使用Bootstrap制作基本网站的方法。
草图
期望完成后，大概长这个样子。
准备工作
根据上面的规划，我们需要准备几张图片。这样最终页面看起来才有点像样。
图片放在assets文件夹中。
创建HTML文件index.html，引入bootstrap CSS
<!DOCTYPE> <html> <head> <title>Portfolio Website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS only --> <link href="; rel="stylesheet"> <link rel="stylesheet" href=";> </head> <body> </body> </html>这里，我们引入了图标css。因为后面有需要。
这时候，打开网页，应该是空白，因为我们还没有加入任何html可视元素。
创建导航条
在body块中加入如下代码
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="javascript:void(0)"><img class="img-fluid" src="./asse; /></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> <li class="nav-item"> <a class="nav-link" href="#">产品</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="text" placeholder="找一找"> <button class="btn btn-primary" type="button">Go</button> </form> </div> </div> </nav>代码几乎是从bootstrap5官网复制下来的。
注意：我们使用 navbar-dark bg-dark使得背景是黑色的。logo使用我们自己准备的图片。导航栏包括：首页，关于，产品，联系，以及搜索框。常见的网站配置类目。
此时，效果如下图
创建导航下面的区域hero
<!-- Hero section --> <div class="container"> <div class="row mb-5 mt-5"> <div class="col"> <h1>软件/App<br>分析、设计与开发</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> <div class="w-50 d-grid"><button type="button" class="btn btn-dark">了解一下</button></div> </div> <div class="col"> <img src="./asse; alt="Software Development"> </div> </div> <div class="row"> <div class="col-sm-4 mb-3 mb-sm-0"> <div class="card shadow-sm"> <div class="card-body"> <h1 class="card-title text-center"><i class="bi bi-code-slash"></i></h1> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card shadow-sm"> <div class="card-body"> <h1 class="card-title text-center"><i class="bi bi-bounding-box"></i></h1> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card shadow-sm"> <div class="card-body"> <h1 class="card-title text-center"><i class="bi bi-steam"></i></h1> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div> </div> <!-- End Hero section -->注意：我们使用 mb-5 mt-5 调节区块之间的间距。还使用了shadow-sm为3个块状框创建阴影效果。具体需要哪个图标，上bootrstrap官网查询即可。
效果如下：
加入关于
<!-- About us section --> <section id="about-us"> <div class="container"> <div class="row mt-5 mb-5 align-items-center"> <div class="col-sm-6"> <img src="./asse; class="img-fluid" alt="About Us"> </div> <div class="col-sm-6"> <h1>关于我们</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> <button type="button" class="btn btn-dark btn-large">Let's meet</button> </div> </div> </div> </section> <!-- End About us section --> 创建产品/项目列表
主要用的CSS是带图片的card。另外，请注意：
row-cols-1 row-cols-md-2 当设备宽度超过Medium定义的尺寸时：显示2列。否则显示1列。这样在手机上也能自适应。
<!-- Projects section --> <section id="projects"> <div class="container"> <div class="row align-items-center projects"> <div class="col"> <h1>产品一览</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div> </div> <div class="row align-items-center"> <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card"> <img src="./asse; class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="./asse; class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="./asse; class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="./asse; class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> </div> </div> </section> <!-- End Projects section --> 最后，再加联系我们
<!-- Contact section --> <section id="contact"> <div class="container mb-5 mt-5"> <div class="row align-items-center"> <div class="col"> <h1>Contact US</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div> </div> </div> </section> <!-- End Contact section --> 加个页脚
<footer class="bg-light text-center text-lg-start"> <!-- Copyright --> <div class="text-center p-3"> © 2023 Copyright <a class="text-dark" href="#">S;/a> </div> <!-- Copyright --> </footer>最终，效果如下图
在手机上浏览：
这样一个基本的网站雏形就差不多了。初步测试，支持基本的设备自适应。
总共，大概180行代码。
除了使用bootstrap本身的CSS外，不使用其它任何自定义的CSS。
确保足够dry。便于维护升级。