01bootstrap--基本内容

最新推荐文章于 2021-01-12 16:53:31 发布

sunberryL

最新推荐文章于 2021-01-12 16:53:31 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/sunberryl/article/details/89041638

版权

1、什么是bootstrap？

bootstrap是当前最流行的前端框架，其目的是为了让web开发更敏捷，特点就是灵活简洁，代码优雅，美观大方。
注：使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

2、如何快速使用一个第三方框架

1、下载第三方框架文档
2、引入文档
3、利用文档的使用方式使用文档。

3、基础的bootstrap模板及解释

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"><!--设置当前HTML文件的字符编码-->
<!--“edge值可以改。设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）”-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	
    <!--声明当前网页在移动端浏览器中展示的相关设置
    视口的作用：在移动浏览器中，当页面超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
    目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
    视口的宽度可以通过meta标签来设置
    其他属性；
    width:视口的宽度
    initial-scale:初始化缩放---确保网页加载时，是以1:1的比例呈现，不会有任何的缩放
    user-scasble:是否允许用户缩放
    minimum-scale:最小缩放
    maximum-scale:最大缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"><!--initial-scale=1.0----就是视口初始化大小不缩放-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>bootstrap</title>
	
    <!-- Bootstrap 引入bootstrap核心样式表文件 -->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--条件注释：【如果当前浏览器版本小于IE9，则后面那两个脚本就会被加载出来。如果当前版本大于IE9，则注释就真的是注释了】-->
     <!--让浏览器可以识别html5的新标签-->
   <!--响应式【让低版本浏览器可以使用css3的媒体查询（响应式）】-->
      <!--[if lt IE 9]>
	  <script src="lib/html5shiv/html5shiv.min.js"></script>
      <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/main.css">
    <!--
		/*一块板，可设置宽度且居中。
		响应式布局：【何为响应式：就是界面会根据设备的不同而自动调整,可以根据设备的宽度变化而变化。bootstrap提供的一个响应式容器。】
		*/
	-->
  </head>

--------------------------------------------------------------------------------------------------------
//基础的bootstrap模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
</head>

<body></body>

</html>

4、条件注释

条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

5、第三方依赖

jQuery： bootstrap框架中的所有JS组件都依赖于jQuery实现
**html5shiv：**让低版本的浏览器可以识别HTML5的新标签，如header、footer、section等。
**respond：**让低版本浏览器可以支持CSS的媒体查询功能

6、媒体查询（media query）

@media (判断条件（针对于当前窗口的判断）){
    /*这里的代码只有当判断条件满足时才会执行*/
}

@media (min-width: 768px) and (max-width: 992px) {
  /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
  .container {
    width: 750px;
  }
}

**section：**相互之间无牵连的部分。
**bootstrap中的fonts字体：**就是本地没有的web字体。

sunberryL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01bootstrap--基本内容

1、什么是bootstrap？bootstrap是当前最流行的前端框架，其目的是为了让web开发更敏捷，特点就是灵活简洁，代码优雅，美观大方。注：使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式2、如何快速使用一个第三方框架1、下载第三方框架文档2、引入文档3、利用文档的使用方式使用文档。3、基础的bootstrap模板及解释&lt...
复制链接

扫一扫