Bootstrap学习系列（一）之简介与概述

爱被打了一巴掌 2021-12-21 03:47 217阅读 0赞

最近在学习响应式网站的搭建，所以写个系列文章来巩固一下。

一、首先在搭建响应式网站之前，我们要知道响应式系统的优缺点，和什么类型的网站适合使用响应式的布局。

1、什么是响应式网站：

响应式的网站也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计，以识别各种设备（电脑，手机，平板）。目前这种设计已经出现在越来越多的国内网站上。

2、响应式网站的优点：

1.  随着移动设备越来越多，可以提升[用户体验][Link 1]。
2.  该设计没有网页版本区分，所以SEO的策略保持一致。
3.  可以避免重复内容，专心维护这一个网页。
4.  保持网页的原有链接。
5.  开发人员只需要开发一套系统就能在各种设备上运行，降低开发成本。

3、响应式网站的缺点：

1. 加载的资源文件太多（为了适应不同的设备，可能需要编写多套不同的CSS），导致在移动设备端打开网站速度过慢（一般移动端可能使用3G，4G等网络）。

2.自由度太低，局限性太大，由于需要同时的适应多种设备，必然会导致可以选择的设计方案减少，局限性太大。

3.只支持一些主流的就新的浏览器，兼容性是一个很难解决的问题。需要花费大量的时间在兼容性上。

4.对开发人员对前端技术要求太大。

4、哪些网站适合响应式的布局：

页面排版简单，内容简单的网站(一些内容型的网站：新闻的浏览)，一些大型的网站不建议使用响应式的布局。

国内的一些出名的响应式网站：http://www.pingwest.com/（[PingWest中文网][PingWest]）

二、bootstrap的概览。

1、首先的你网站得在支持HTML5的环境下运行。

2、最新的Bootstrap3是以移动设备优先的。

为了保证我们使用移动设备浏览网站时，不会进行自动缩放，我需要通过为视口（viewport）设置 meta 属性为 `user-scalable=no来禁止缩放功能。`

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

content属性值 :

width:可视区域的宽度，值可为数字或关键词device-width。

height:同width。

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放。

3、Bootstrap使用了Normalize.css来增强跨浏览器表现的一致性。

4、布局容器.C `ontainer和.C` `ontainer-fluid两个布局容器不能互相嵌套使用。`

.Container:类用于固定宽度并支持响应式布局的容器。

<div class="container">
    
      　　　　...
    
    　　　　</div>

`.container-fluid` :类用于100%宽度，占据全部视口（viewport）容器。（关于什么是viewport请浏览http://zhanchaojiang.iteye.com/blog/1470586）

<div class="container-fluid">
      　　　　...
    　　　　</div>

以上是对bootstrap使用的一个大概简介，下一章将会介绍什么是栅格系统。

转载于:https://www.cnblogs.com/Neallin/p/5779202.html

[Link 1]: http://www.5icool.org/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C-12-1.html
[PingWest]: http://link.zhihu.com/?target=http%3A//www.pingwest.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关前端概述之Bootstrap

一、快速入门 1.1简介 > 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTM...

小咪咪/ 2024年04月17日 13:27/ 0 赞/ 39 阅读

相关 Bootstrap3 简介（一）

[http://www.runoob.com/bootstrap/bootstrap-grid-system.html][http_www.runoob.com_bootstr

素颜马尾好姑娘i/ 2023年10月18日 15:11/ 0 赞/ 59 阅读

相关 Git系列一之git简介

Git简介 Git是什么？ Git是目前世界上最先进的分布式版本控制系统（没有之一）。 Git有什么特点？简单来说就是：高端大气上档次！那什么是版本

╰+攻爆jí腚メ/ 2022年07月20日 15:24/ 0 赞/ 233 阅读

相关 Redis系列学习(一)之概述及安装

Redis系列学习(一)之概述及安装文章目录 1、引言 2、适用人群 3、背景 4、学习目标 5、为什么选择redis

秒速五厘米/ 2022年06月10日 10:58/ 0 赞/ 178 阅读

相关 Nginx学习总结之系列一：《Nginx入门简介》

下面我介绍一下：Nginx的最基本功能以及简单配置； 1、静态HTTP服务器首先，Nginx是一个HTTP服务器，可以将服务器上的静态文件（如HTML、图片）

r囧r小猫/ 2022年05月31日 02:35/ 0 赞/ 219 阅读

相关 BootStrap复习之BootStrap简介

今日目录： 1、BootStrap简介 2、HelloWorld 一、BootStrap简介 Boo

落日映苍穹つ/ 2022年05月24日 07:38/ 0 赞/ 187 阅读

相关 Java基础之bootstrap概述篇

1、bootstrap介绍 \Bootstrap，基于HTML、CSS、JavaScript的前端框架（半成品）。其预定义一套css样式和与此样式对应的jQuery

桃扇骨/ 2022年03月25日 10:38/ 0 赞/ 421 阅读

相关 Bootstrap学习系列（一）之简介与概述

最近在学习响应式网站的搭建，所以写个系列文章来巩固一下。一、首先在搭建响应式网站之前，我们要知道响应式系统的优缺点，和什么类型的网站适合使用响应式的布局。 1、什么是响应

爱被打了一巴掌/ 2021年12月21日 03:47/ 0 赞/ 218 阅读

相关机器学习（一）之概述

机器学习概述 [万物皆可AI][AI] [机器学习][Link 1] [机器学习，重点在于“学习”][Link 2]

秒速五厘米/ 2021年12月13日 21:07/ 0 赞/ 264 阅读

相关 redis学习系列一：简介

一、简介：在过去的几年中，NoSQL数据库一度成为高并发、海量数据存储解决方案的代名词，与之相应的产品也呈现出雨后春笋般的生机。然而在众多产品中能够脱颖而

骑猪看日落/ 2021年09月11日 06:32/ 0 赞/ 314 阅读