|
本文介绍使用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='https://cdn./npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet'> <link rel='stylesheet' href='https://cdn./npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css'> </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='./assets/logo.png' /></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='./assets/hero.png' 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='./assets/about.png' 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='./assets/dandelion-445228__340.jpg' 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='./assets/fantasy-2049567__340.jpg' 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='./assets/flowers-276014__340.jpg' 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='./assets/road-1072823__340.jpg' 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='#'>Stackoverflow.ink</a> </div> <!-- Copyright --></footer>
最终，效果如下图在手机上浏览： 这样一个基本的网站雏形就差不多了。初步测试，支持基本的设备自适应。 总共，大概180行代码。 除了使用bootstrap本身的CSS外，不使用其它任何自定义的CSS。 确保足够dry。便于维护升级。
|
