初识Bootstrap

最新推荐文章于 2023-04-30 16:51:55 发布

我是一颗好李子

最新推荐文章于 2023-04-30 16:51:55 发布

阅读量488

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 前端前端框架

本文链接：https://blog.csdn.net/m0_69034993/article/details/127080775

版权

Bootstrap 专栏收录该内容

9 篇文章 5 订阅

订阅专栏

一、Bootstrap概述

1 、什么是Bootstrap ？

响应式设计Bootstrap是由美国Twitter公司开发的一种前端框架，用来快速开发响应式布局、移动设备优先的Web前端页面。

Bootstrap基于HTML、CSS、JAVASCRIPT，它简洁灵活，使得Web开发更加快捷，是目前最受欢迎的前端框架之一。

2、Bootstrap特性

①丰富的组件库 ②响应式设计 ③移动设备优先 ④浏览器支持 ⑤成本低，易上手

⑥CSS预编译 ⑦框架成熟

3、 Bootstrap的组成

基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构

布局组件：Bootstrap包含了丰富的组件库，提供了十几个可重用的组件

CSS样式表：Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class。

插件：Bootstrap提供了一些基于jQuery（一个用于简化JavaScript编程的库）构建的可选插件。

二、移动端开发主流方案

1.单独制作移动端页面

单独制作移动端页面的优势和劣势：

优势：

①可以充分考虑到平台的优势和局限性；

②创建良好的用户体验设计；

③网页在移动设备上加载更快；

劣势：

①移动端网站会产生多个URL（PC端一套URL，移动端一套URL）；

②维护成本会增加，工作量比较大；

③重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理

2 、制作响应式页面

响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。响应式开发主要是为了解决移动互联网浏览的问题。

响应式页面的优点：

①可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题。

②便于搜索引擎收录，无论在移动端设备还是PC端上访问的都是同一个链接地址，这样就减少了权重的分散。让网站对搜索引擎更加友好。

③节约成本。响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。对于开发者而言，减少了大量重复的工作，提高了工作的效率；对于公司而言，节省了人员开支，降低了开发成本。

三、我的第一个Bootstrap实例

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>我的第一个Bootstrap案例</title>
	<!--第二个meta标记用于配置视口属性
         content-width设置视口的宽度，这里表示视口宽度与设备宽度相同；
         initial-scale设置初始缩放比例，默认为1-->
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<!--引入bootstrapCSS文件、
         jQuery文件，bootstrapJS文件
         (jQuery文件在前，bootstrapJS文件在后）-->
</head>

<body>
	<div class="container">
		<div class="jumbotron">
			<h1>我的第一个 Bootstrap 页面</h1>
			<p>重置窗口大小，查看响应式效果！</p>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<h3>第一列</h3>
				<p>Bootstrap是目前最受欢迎的前端框架之一。</p>
			</div>
			<div class="col-sm-4">
				<h3>第二列</h3>
				<p>Bootstrap用于快速开发响应式布局、移动设备优先、WEB项目</p>
			</div>
			<div class="col-sm-4">
				<h3>第三列</h3>
				<p>Bootstrap是基于HTML、CSS、JAVASCRIPT</p>
			</div>
</body>

</html>

效果图：

我是一颗好李子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识Bootstrap

对于开发者而言，减少了大量重复的工作，提高了工作的效率；响应式设计Bootstrap是由美国Twitter公司开发的一种前端框架，用来快速开发响应式布局、移动设备优先的Web前端页面。响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。Bootstrap基于HTML、CSS、JAVASCRIPT，它简洁灵活，使得Web开发更加快捷，是目前最受欢迎的前端框架之一。CSS样式表：Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class。
复制链接

扫一扫

专栏目录