bootstrap做网页步骤（用bootstrap做一个网页）

之前有想法学习一下前端框架的，后来没有坚持下来。连最基础的栅格系统都忘记了。于是，花了一点时间，重新温习了一下。写了一个简单的网页。

用bootstrap做一个网页

页面大致是下面这张图。做得比较一般，不过能够自适应各种设备大小了。

网页效果

说下制作过程吧，首先下载bootstrap提供的css,js文件，（之前看文档的时候，直接引用了CDN，不知道什么原因，用了没效果。），在html代码里引用这些文件。

接下来，就是制作网页的过程。要实现自适应网页，首先要加入这段代码

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

然后，要明白栅格系统的使用。

网页是分成12份的，对应不同的屏幕，使用不同的栅格系统类前缀。比如在<768px的时候，使用.col-xs-，根据你需要在哪些屏幕中显示，使用不同的类前缀。<class = "col-xs-3">,<class = "col-xs-9">这样就表示一行分成了3份和9份。

注意的是，栅格系统要在container和row类中使用，具体使用可以参考官网的技术文档来写。bootstrap3和bootstrap4有些不同，一定要注意了，比如响应式图片，一个是用.img-responsive，一个是用.img-fluid的。

总结一下，使用bootstrap来写网页的话，调用已经写好的css,js框架。很快就可以写出一个漂亮的网页，当然，要熟悉掌握各个类的使用，还是需要花费一些时间。

上面就是小居数码小编今天给大家介绍的关于（用bootstrap做一个网页）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• ps怎么做一个产品详情页方法（怎么用ps制作商品详情页）
• 做一个app多少钱及维护（一个app开发多少钱）
• 这个方法帮你轻松解决（斑斓石浏览器网页打不开）
• 网页显示找不到dns（浏览器找不到服务器或dns错误怎么办）

（468）个朋友认为回复得到帮助。