21- Bootstrap概述

1- Bootstrap概述

1.1 什么是Bootstrap

一个前端的框架,提高前端的开发效率,制作出更加专业,漂亮的页面。

基于html、css、js技术,只要有这个基础就可以使用Bootstrap。

21- Bootstrap概述_第1张图片

bootstrap中文官网:http://www.bootcss.com

1.2 Bootstrap的优势

自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

Bootstrap支持所有的主流浏览器。如:Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。

只要具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

21- Bootstrap概述_第2张图片

1.3 响应式设计网页

1.3.1 网页的响应式设计

同一个网页可以自适应不同设备的屏幕宽度

1.3.1 电脑效果

21- Bootstrap概述_第3张图片

1.3.2 移动端效果

21- Bootstrap概述_第4张图片

1.4 响应式布局特点

同一个网页可以自适应不同的设备宽度。

1.5 支持四类设备

在bootstrap框架中有以下四种设备,以分辨率为标准来划分。

类样式以这些缩写开头

四类设备 缩写
微型设备 xs
小型设备 sm
中型设备 md
大型设备 lg

2- Bootstrap目录

2.1 Bootstrap内容

2.2 Bootstrap下载

https://github.com/twbs/bootstrap/releases,下载用于生产环境的Bootstrap。

21- Bootstrap概述_第5张图片

2.3 目录结构

21- Bootstrap概述_第6张图片

2.4 目录的作用

css:框架制作好的样式。

js:框架中JS插件,要用到jQuery框架。

font:字体图标。

3- 创建Bootstrap的模板

3.1 创建步骤

  • 复制解压出来的三个文件夹到项目中:css, js, fonts
  • 复制jquery框架:jquery-3.1.1.min.js复制到js目录下
  • 复制:"起步->基本模板"中代码到网页,修改网页的内容。

3.2 代码示例


<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>Bootstrap的模板title>

  
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">

  
  <script src="../static/js/jquery-3.1.1.js">script>

  
  <script src="../static/js/bootstrap.min.js">script>
head>
<body>
	<h3>世界你好!!!h3>
body>
html>

你可能感兴趣的:(web)