1.BootStrap简介
Bootstrap是由美国Twitter公司开发的一种前端框架,用来快速开发响应式布局、移动设备优先的Web项目,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。
2. BootStrap特点
(1) 移动设备优先
(2)响应式Web设计
(3) 浏览器支持
(4)容易上手
(5)网格布局
(6)丰富的组件及插件
(7)使用LESS构建动态样式
(8)支持HTML5和CSS3
(9)开源(项目托管于GitHub:http://github,并借助GitHub平台实现社区化开发和共建)
3.下载与使用
3.1下载
官网:https://getbootstrap/
中文网:https://www.bootcss/
解压文件
3.2下载完成后
拷贝dist/css中的bootstrap.min.css到项目css中
拷贝dist/js中的bootstrap.min.js到项目js中
3.3下载jquery.js
https://jquery/
3.4使用需要把下载好的bootstrap文件夹拷贝到新建的项目中去(jquery文件也一样)
4.实例
4.1代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个Bootstarp页面</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>
</div>
</div>
</body>
</html>
4.2介绍
注意地址的更换
5.运行结果
更多推荐
Bootstrap的安装和使用
发布评论