1. bootstrap概述

静待花开A

已于 2024-04-18 20:19:46 修改

阅读量4.2k

点赞数 3

分类专栏： Bootstrap 文章标签： bootstrap 前端 javascript 1024程序员节

于 2022-10-21 15:37:46 首次发布

本文链接：https://blog.csdn.net/wxhua420701325/article/details/127446621

版权

Bootstrap 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

概述

Bootstrap 是 Twitter推出的，目前最流行的前端开发框架。

Bootstrap 是基于 HTML、CSS、JavaScript 的，用于快速开发 Web 应用程序和网站的前端框架。用于开发响应式布局、移动设备优先的 WEB 项目。

一、为什么使用bootstrap？

自己制作响应式的网页适配各种终端的时候，需要针对每种终端编写一套样式，而且开发和维护很麻烦。而bootstrap库中，包含了很多现成的带有各种样式和功能的代码，web开发者不必再花费时间、花费精力的编码，只需要找到合适的代码，插入合适的位置即可。

最主要的是这些代码片段是经过封装的，可以适用于不同的终端设备。

二、Bootstrap特点

Bootstrap是基于HTML5和CSS3开发的，并在jQuery框架的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。包含了丰富的Ｗｅｂ组件（下拉框，按钮，导航，分页，排版，缩略图等）。

1 ) 快速制作响应式的网页来适配各种终端
2 ) 开发简单、方便
3 ) 移动先行
4 ) 代码开源
5 ) 代码有良好的规范

对于火狐和谷歌浏览器支持较好，对IE９支持尚可，低版本IE兼容性差。

三、文件结构

登录Bootstrap中文网，下载bootstrap文件。

下载解压后的文件夹和文件目录如下：

四、bootstrap的使用

bootstrap的引入：

注意：jquery文件在bootstrap文件之前引入

1.第一个网页模板

代码如下（示例）：

		<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta  charset="UTF-8">
			<meta name="viewport" content="width=device-width,
						initial-scale=1.0,
						maximum-scale=1.0,
						user-scalable=no">
			<title>Title</title>
			<!-- bootstrap的样式文件 -->
			<link href="css/bootstrap.css" rel="stylesheet">
			<!-- 如果使用bootstrap的JS插件，必须引入jquery文件，位置必须在引入bootstrap.js之前先引入 -->
			<script src="js/jquery-1.12.4.js"></script>
			<!-- bootstrap的JS插件 -->
			<script src="js/bootstrap.js"></script>
		</head>
		<body>
			<h1>大家好</h1>
		</body>
		</html>

解释：

1. Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。

如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

2. 移动设备优先是 Bootstrap 3 的最显著的变化。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

解释：

1）width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

2）initial-scale=1.0 设置页面的初始缩放程度。确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

3）在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉

4）通常情况下，maximum-scale=1.0（设置最大的缩放程度（用户可放大的程度））与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

5）minimum-scale=1.0 设置最小的缩放程度（用户可缩小的程度）

在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。

现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

2.bootstrap整体架构

bootstrap框架中除了Css组件和JavaScript插件外，另外四部分都是基础支撑平台。

1）CSS 12栅格系统

把网页总宽度平分成12份。开发人员可以自由按份组合，开发出简洁方便的程序。

12栅格系统是整个bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。

2）基础布局组件

多种基础布局组件，如排版，代码，表单按钮等。

3）jquery

bootstrap所有JavaScript插件都依赖于jQuery1.10+，如果要使用这些插件，必须用到jQuery库。

4）响应式设计

根据用户行为以及设备环境（系统平台，屏幕尺寸）进行相应的调整。

5）css组件

6）JavaScript插件

点个赞再走吧。

静待花开A

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
1. bootstrap概述

Bootstrap 是 Twitter推出的，目前最流行的前端开发框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，用于快速开发 Web 应用程序和网站的前端框架。用于开发响应式布局、移动设备优先的 WEB 项目。
复制链接

扫一扫