bootstrap第一章：bootstrap介绍

维持好习惯

已于 2022-10-13 08:19:47 修改

阅读量270

点赞数

分类专栏： bootstrap 文章标签： bootstrap 前端 javascript

于 2022-09-29 11:42:59 首次发布

本文链接：https://blog.csdn.net/qq_62244121/article/details/127104140

版权

bootstrap 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

bootstrap第一章：bootstrap介绍

1.bootstrap简介

bootstrap封装了很多组件，可通过HTML标签进行调用。

bootstrap会根据不同设备自动调整网站布局。“移动优先‘只先开发与手机适配的网站，再扩展到电脑或平板。

Bootstrap是快速开发响应式Web应用程序的前端框架。Bootstrap基于HTML、CSS和JAVASCRIPT。

2.设置环境

官网：Download · Bootstrap (getbootstrap.com)，点击下载

2.创建文件后拖入bootstrap文件

2.1idea创建bootstrap文件

3.bootstrapCDN

CDN，即内容分发网络，依靠部署在各地的边缘服务器，通过缩短服务器和用户之间的物理距离，帮助最小化加载网页内容的延迟。这可以帮助世界各地的用户浏览相同的高质量内容，而不会导致加载时间变慢。如果没有CDN，内容源服务器必须响应每一个最终用户请求。这将导致发送到原点和后续负载的大量流量，如果流量峰值非常高或负载持续存在，则会增加响应失败的几率。

4.bootstrap模板

<!DOCTYPE html> 
<html>    
   <head> 
      <title>Bootstrap Template</title> 
      <!-- 确保在移动设备上适当的渲染和触摸缩放。--> 
    <meta name = "viewport" content = "width = device-width,   
          initial-scale = 1.0"> 
      <!-- Bootstrap CSS link，注意路径要正确 --> 
      <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
    </head> 
   <body> 
       <h1>Hello World</h1> 
   </body> 
</html>

width属性控制设备的宽度。将其设置为device-width将确保它在各种设备(手机、台式机、平板电脑……)上正确呈现。
Initial-scale = 1.0确保当加载时，你的网页将以1:1的比例呈现，而不会应用缩放。
tial-scale = 1.0确保当加载时，你的网页将以1:1的比例呈现，而不会应用缩放。
user-scalable = no, 禁用移动设备上的缩放功能。用户只能滚动，不能缩放。