首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

20分钟成功编写bootstrap响应式页面就这么简单

作者：强心脏229 | 来源：互联网 | 2022-01-25 22:54
这篇文章主要教大家如何在20分钟内成功编写bootstrap响应式页面，其实很简单，培养大家分分钟开发出一个高大上的页面能力，感兴趣的小伙伴们可以参考一下

最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。

经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。
图 1. 移动优先，适应不同设备

一、安装
最简单的方式是直接在网页中引用内容分发网络（CDN）提供的 Bootstrap，当用户访问网页时，会从就近的服务器上获取资源。

清单 1. 从内容分发网络上获取 Bootstrap

还可以选择下载 Bootstrap 在本地部署。用户可以下载页面下载完整的 Bootstrap，也可以在定制页面根据项目需要，选择项目用到的功能，编译并下载一个简化版的 Bootstrap。下载完成后得到一个 zip 文件，解压后的目录结构如下所示：

清单 2. Bootstrap 目录结构

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

这里我们主要关注三个简化后的文件：bootstrap.min.css 是 Bootstrap 的主要组成部分，包含了大量要用到的 CSS 类；bootstrap-theme.min.css 包含了可选的 Bootstrap 主题；bootstrap.min.js 提供了一些 Javascript 方法，需要注意的是 Bootstrap 依赖于 jQuery，因此使用 bootstrap.min.js 前必须引入 jQuery。和使用内容分发网络一样，我们使用相对路径在自己的页面中引入相应的 CSS 和 Javascript。在实际开发中，我们常常使用 Bootstrap 提供的模板作为起点，该模板引入了响应式页面需要的元数据和 Bootstrap，开发者可在此基础之上编写自己的响应式页面：

清单 3. Bootstrap 基础模板





















网格系统

和我们在《编写第一个响应式页面》中设计的网格系统一样，Bootstrap 也将页面分为行（.row），每行 12 列（.col-md-*）。行必须包含在容器里，根据屏幕大小不同，列又分为.col-xs-、.col-sm-、.col-md-、.col-lg-，分别对应手机(<768px)、平板(≥768px)、中等屏幕电脑(≥992px)和大屏幕电脑(≥1200px)。其中出现的这些像素称为临界点，每当浏览器大小或屏幕尺寸从一个临界点到达另一个临界点时，相应的 CSS 类就会起作用，页面布局就会发生变化。详见下图：


图 3.网格系统






怎么理解上面这个表格呢？假如在电脑上浏览页面，需要将页面分为三列，分别占行宽的 1/4、2/4、1/4，则可编写代码如下：


清单 5. 一行分三列








.col-md-3


.col-md-6


.col-md-3








打开浏览器，可以看到它们各自占据了 12 列中的 3、6、3 列，加起来恰好是 12 列。如果我们缩小浏览器窗口，直到其小于 970px，此时会发现变成了三行，堆在一起显示。除过.col-xs-，其他 CSS 类的行为都一样，在屏幕尺寸小于其临界点时，会堆起来显示，只有在屏幕尺寸大于其临界点时，才按列显示，而.col-xs- 在任何情况下都按列显示。

对应不同屏幕尺寸的 CSS 类可以混合使用，比如我想让一个页面在电脑上显示 3 列，在手机上显示成 2 列，则可编写代码如下，在手机上，第三列会换行到下一行显示，并且占据行宽的一半：

清单 6. 在电脑和手机上显示不同数量的列








.col-md-3


.col-md-6


.col-md-3








如果希望在所有设备上显示相同的列，只需要定义最小尺寸的.col-xs- 即可，布局会自动扩展到更大尺寸，反之则不成立：

清单 7. 所有设备上显示同数量的列








.col-xs-6


.col-xs-6








还可以给列一定的偏移量，比如第一列占行宽的 1/4，我们希望第二列向右偏移 6 列，占用行末的 3 列：

清单 8. 列偏移








.col-md-3


.col-md-3






列的顺序也可以通过.col-md-push-* 和 .col-md-pull-* 调整，它们的含义是将某元素向后推或向前拉若干列，开发者可使用该特性，将重要内容在手机显示时，拉到前面：

清单 9. 推拉列








.col-md-9 .col-md-push-3


.col-md-3 .col-md-pull-9






更让人兴奋的是，这种网格系统还可以嵌套，这样就能进行各种各样复杂的布局了:

清单 10. 嵌套









Level 1: .col-sm-9




Level 2: .col-xs-8 .col-sm-6




Level 2: .col-xs-4 .col-sm-6






Level 1: .col-sm-3











上面的代码总体上分成两列，其中第一列又嵌套了两列。

Bootstrap 的网格功能为网页布局提供了各种可能性，而且使用起来非常简单，下面我们不妨通过一个案例，看看使用 Bootstrap 编写一个响应式页面是多么简单。




三、实战

假设现在要实现一个如下面的图片所示的网页：

图 4. 网页设计






首先，我们先将网页元素划分成相应的行和列，下图是作者的划分：

图 5. 将网页设计划分成行和列






据此，定义我们的 HTML 结构，并添加适当的 Bootstrap CSS 类：

清单 11. 定义 HTML 结构
















更有意思的是，当你缩小浏览器窗口，或者从手机上访问该页面时，会发现它已经是一个简单的响应式页面了，而我们并没有添加任何额外代码！看一下时间，总共花了不到 20 分钟，我也兑现了分分钟编写一个响应式页面的承诺。

                            
                                    

        
        
    



    

        
    




    

    

        
推荐阅读

        

            
    
                                
  • 
                    
    
                        jsp
                        
    入门Java需熟练掌握哪些技术呢？
    
                    
    

                    
    
                                                
    
                            入门Java需熟练掌握哪些技术呢？
                        
    
                                                
    
                        Java工程师无疑是当下令人艳羡的工作之一，因此，每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        jsp
                        
    Python正课119 —— Django 进阶9
    
                    
    

                    
    
                                                
    
                        本文内容皆为作者原创，如需转载，请注明出处：https:www.cnblogs.comxuexianqip13045462.html1.自定义分页器的拷贝及使用当我们需要使用 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                                
  • 
                    
    
                    
                
    • 
                
                                
  • 
                    
    
                        javascript
                        
    单击时动态创建
  • 元素 - Dynamically create 
  •  element on click
    • 
                    
    

                    
    
                                                
    
                        Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        javascript
                        
    前端人员必须知道的三个问题及其发展阶段
    
                    
    

                    
    
                                                
    
                        本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        javascript
                        
    响应式页面的概述和实现方式
    
                    
    

                    
    
                                                
    
                        本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        javascript
                        
    HTML5网页模板怎么加百度统计？
    
                    
    

                    
    
                                                
    
                            HTML5网页模板怎么加百度统计？
                        
    
                                                
    
                        本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        post
                        
    Android实战——jsoup实现网络爬虫，糗事百科项目的起步
    
                    
    

                    
    
                                                
    
                            Android实战——jsoup实现网络爬虫，糗事百科项目的起步
                        
    
                                                
    
                        本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        post
                        
    从零基础到精通的前台学习路线
    
                    
    

                    
    
                                                
    
                            从零基础到精通的前台学习路线
                        
    
                                                
    
                        随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        future
                        
    Netty源代码分析服务器端启动ServerBootstrap初始化
    
                    
    

                    
    
                                                
    
                            Netty源代码分析服务器端启动ServerBootstrap初始化
                        
    
                                                
    
                        本文主要分析了Netty源代码中服务器端启动的过程，包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用，深入理解Netty服务器端的启动过程。同时，还介绍了LoggingHandler的作用和使用方法，帮助读者更好地理解Netty源代码。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        request
                        
    Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
    
                    
    

                    
    
                                                
    
                            Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
                        
    
                                                
    
                        本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题，并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式，我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的，因此无需担心会话信息被覆盖的问题。需要注意的是，本文讨论的是多个客户端级别上的多用户登录，而非同一个浏览器级别上的多用户登录。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        request
                        
    jQuery图片预加载+等比例缩放
    
                    
    

                    
    
                                                
    
                        本文介绍了使用jQuery实现图片预加载和等比例缩放的方法，同时提供了演示和相关代码。该方法可以重置图片的宽度和高度，并使图片在水平和垂直方向上居中显示。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        process
                        
    DataTables插件介绍及使用方法
    
                    
    

                    
    
                                                
    
                        本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        process
                        
    Android 新闻App的本地服务器搭建教程
    
                    
    

                    
    
                                                
    
                        本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        jsp
                        
    Java验证码——kaptcha的使用配置及样式
    
                    
    

                    
    
                                                
    
                            Java验证码——kaptcha的使用配置及样式
                        
    
                                                
    
                        本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        format
                        
    Node.js学习笔记(一)package.json及cnpm
    
                    
    

                    
    
                                                
    
                            Node.js学习笔记(一)package.json及cnpm
                        
    
                                                
    
                        本文介绍了Node.js中包的概念，以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM（Node Package Manager）的基本介绍和使用方法，以及如何通过NPM下载第三方模块。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                
                                
  • 
                    
                    
                    
                
    • 
                

            

        

    





















    


    

        

            
            

                
                author-avatar
            


            

                强心脏229            


            

                这个家伙很懒，什么也没留下！            



        

    


    

    

    
    

    

        
Tags | 热门标签

        

            
        

    


    
    

        

            

            

        

        
RankList | 热门文章

        

            
        

    

    

    






    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved  |   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区      版权所有