响应式网站制作之Bootstrap框架的使用

2023-03-21 分类：响应式网站

在响应式网站中使用bootstrap的使用率是极大的，很多开发者都在使用它。那boosttrap的优势是什么了？在boosttrap出现前有很多网站的页面排版命名重复、复杂、无意义，样式重复、冗余、不规范、不和谐，页面错乱、不规范、不和谐，而boosttrap出现后各种命名都统一并且规范化，页面风格统一，画面和谐。
Bootstrap的核心是栅格系统，Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类。

图像1

排列如图：

栅格参数如图：
栅格系统是通过一系列的行（row）与列（column）的组合来组建页面布局的，Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。Bootstrap提供了两个容器类（.container和.container-fluid），而这两种容器类不能互相嵌套。
HTML代码2

如图：
当屏幕宽度大于和等于1200px时.Bootstrap使用.col-lg-的类来组建页面布局，当屏幕宽度大于和等于992px时.Bootstrap使用.col-md-的类来组建页面布局，当屏幕宽度大于和等于768px时.Bootstrap使用.col-sm-的类来组建页面布局，当屏幕宽度小于768px时.Bootstrap使用.col-sm-的类来组建页面布局，通过这些响应式的类Bootstrap组建了一个在多种屏幕设备上的响应式网站。

文章标题：响应式网站制作之Bootstrap框架的使用
标题来源：https://www.cdcxhl.com/news/246232.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有响应式网站等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容