本文介绍使用Bootstrap制作基本网站的方法。

草图

期望完成后，大概长这个样子。

准备工作

根据上面的规划，我们需要准备几张图片。这样最终页面看起来才有点像样。

图片放在assets文件夹中。

创建HTML文件index.html，引入bootstrap CSS

这里，我们引入了图标css。因为后面有需要。

这时候，打开网页，应该是空白，因为我们还没有加入任何html可视元素。

创建导航条

在body块中加入如下代码

代码几乎是从bootstrap5官网复制下来的。

注意：我们使用 navbar-dark bg-dark使得背景是黑色的。logo使用我们自己准备的图片。导航栏包括：首页，关于，产品，联系，以及搜索框。常见的网站配置类目。

此时，效果如下图

创建导航下面的区域hero

  

    

      
软件/App
分析、设计与开发
      
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.
      
了解一下
    
    

      
    
  
	

	  

		

		  

			

			
With supporting text below as a natural lead-in to additional content.
		  
		
	  
	  

		

		  

			

			
With supporting text below as a natural lead-in to additional content.
		  
		
	  
	  

		

		  

			

			
With supporting text below as a natural lead-in to additional content.
		  
		
	  
	

注意：我们使用 mb-5 mt-5 调节区块之间的间距。还使用了shadow-sm为3个块状框创建阴影效果。具体需要哪个图标，上bootrstrap官网查询即可。

效果如下：

加入关于

  

    

      

        
      
      

        
关于我们
        
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.
        
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.
        Let's meet
      
    
  

创建产品/项目列表

主要用的CSS是带图片的card。另外，请注意：

row-cols-1 row-cols-md-2

当设备宽度超过Medium定义的尺寸时：显示2列。否则显示1列。这样在手机上也能自适应。

  

    

      
产品一览
      
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.
    
  

	

	  

		

		  
		  

			
Card title
			
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
		  
		
	  
	  

		

		  
		  

			
Card title
			
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
		  
		
	  
	  

		

		  
		  

			
Card title
			
This is a longer card with supporting text below as a natural lead-in to additional content.
		  
		
	  
	  

		

		  
		  

			
Card title
			
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
		  
		
	  
	

最后，再加联系我们

  

    

      

        
Contact US
        
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.
      
    
  

加个页脚最终，效果如下图

在手机上浏览：

这样一个基本的网站雏形就差不多了。初步测试，支持基本的设备自适应。

总共，大概180行代码。

除了使用bootstrap本身的CSS外，不使用其它任何自定义的CSS。

确保足够dry。便于维护升级。