Bootstrap基本模板

末蓝、 2021-11-05 09:54 288阅读 0赞

# Bootstrap简介 #

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。它的座右铭就是：

## 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 ##

中文文档地址：[https://www.bootcss.com/][https_www.bootcss.com]

# 为什么要使用Bootstrap? #

1.  生态圈火，不断地更新迭代；
2.  提供一套美观大方地界面组件；
3.  提供一套优雅的 HTML+CSS 编码规范；
4.  让我们的 Web 开发更简单，更快捷；

【注意】使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式。

# 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=no">
        
        <title>微金所</title>
    
        <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    
        
        
    
        
        
        
    
        
        
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        
        <script src="lib/jquery/jquery.js"></script>
        <script src="lib/bootstrap/js/bootstrap.js"></script>
        
        <script src="js/main.js" type="text/javascript"></script>
    </body>
    </html>

# 模板中移动端所用到的属性介绍 #

1.  width:视口的宽度    width=device-width  => 视口的宽度随着设备的宽度进行响应式变化。
2.  initial-scale：初始化缩放
3.  user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
4.  minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
5.  maximum-scale:最大缩放

# 视口的介绍 #

在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后进行展示。

转载于:https://www.cnblogs.com/duxiu-fang/p/11032769.html

[https_www.bootcss.com]: https://www.bootcss.com/