bootstrap学习笔记--初识bs

最新推荐文章于 2024-02-28 10:15:30 发布

codingCoge

最新推荐文章于 2024-02-28 10:15:30 发布

阅读量644

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/qq_38409944/article/details/80430738

版权

网页前端专栏收录该内容

58 篇文章 2 订阅

订阅专栏

参考：

https://www.quanzhanketang.com/bootstrap/bootstrap_grid_basic.html

bootstrap是基于jQuery的前端CSS框架 预定于好了各种CSS类相当于API接口，直接调用即可使用css样式，方便前端开发。

这个相信大部分的前端框架都可以搞定但是Bootstrap还可以让你轻松创建响应式设计，这什么概念？

意思就是不同设备终端如 PC,手机,平板都可以完美显示页面，而不会因为你设备的原因造成显示不全，需要拖动滑动按钮来查看其他部分。

为什么使用bootstrap？

它的优点是 自适应大小，响应功能 自动调节自身来适用你的设备，是不是很棒。
不仅如此，bootstrap还是移动优先，是核心框架的一部分
而且浏览器兼容性:Bootstrap兼容所有现代浏览器（Chrome，Firefox，Internet Explorer，Safari和Opera）

知道了这么多bootstrap的优点，是不是觉得还是有必要学习一波。
为什么我觉得java后台需要学习前台框架

如何使用bootstrap？

两个方法：

下载到本地

bootcss官网然后引用就行具体操作下面会介绍

可以看到有三个供下载
第一个是已经预编译好的 css模板直接使用到任何 web 项目中

第二个是源码可以根据自己需求定制css模板

源码中dist/目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/包含了所有文档的源码文件
使用 BootCDN 提供的免费 CDN 加速服务
```
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
```
使用Bootstrap CDN的一个优点： 许多用户在访问其他站点时已经从MaxCDN下载了Bootstrap。因此，它会在访问您的网站时从缓存中加载，从而加快加载速度。此外，大多数CDN将确保一旦用户向其请求文件，它将从离它们最近的服务器提供，这也导致更快的加载时间。

注意：因为bootstrap是基于jQuery的框架, 插件全部依赖 jQuery,所以引用bootstrap的js时候需要先引用jquery的js

一般使用压缩版意思就是带min的文件
```
bootstrap.min.* 等
```

创建一个简单web页面

第一步.bootstrap是使用html5的

所以需要引用html5文档

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

在开头就指定了语言和编码格式

第二步：回到开头提到的移动优先，旨在对移动设备做出响应就需要在meta标签中添加标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

该width=device-width部分设置页面的宽度以跟随设备的屏幕宽度（这取决于设备）。

initial-scale=1浏览器首次加载页面时，该部分设置初始缩放级别,确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

那如果我想禁止缩放能做？别说，还真可以

viewport meta标签添加user-scalable=no可以禁用其缩放功能

通常情况下，maximum-scale=1.0与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

第三步：容器

Bootstrap还需要一个包含元素来包装网站内容。

有两个容器类可供选择：

的.container类提供了一个响应固定的宽度容器 意思就是随着窗体的改变网站内容margion大小跟着改变
的.container-fluid类提供了一个全宽度的容器，跨越视口的整个宽度没有margion

注意：容器不可嵌套（您不能将容器放在另一个容器中）。

是不是还是没懂什么是容器？参考
bootstrap中container类和container-fluid类的区别

根据上面三步就可以构造一个简单web页面

<!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">
<title>Hello World</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p> 
    </div>

</body>
</html>

注意点：

X-UA-Compatible属性不懂的话可以参考
对http-equiv中”X-UA-Compatible”属性的理解
可以直接使用CDN而不用本地下载的bootstrap文件
class=”container”使用了容器包装网站内容，但是容器不可嵌套（您不能将容器放在另一个容器中）

基本的bootstrap搭建知识大致如上，后续还会了解更多以及运用bootstrap各  
种元素来搭建一个完整的网站 ，跟着我一起学习吧，新手一个，如有错误，  
欢迎指出，一起进步。

codingCoge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习笔记--初识bs

参考：https://www.quanzhanketang.com/bootstrap/bootstrap_grid_basic.htmlbootstrap是基于jQuery的前端CSS框架预定于好了各种CSS类相当于API接口，直接调用即可使用css样式，方便前端开发。这个相信大部分的前端框架都可以搞定但是Bootstrap还可以让你轻松创建响应式设计，这什么概念？意...
复制链接

扫一扫