BootStrap

最新推荐文章于 2023-01-29 11:15:22 发布

73、

最新推荐文章于 2023-01-29 11:15:22 发布

阅读量274

点赞数

分类专栏： # 前端基础文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_40318474/article/details/106545634

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BootStrap 是一个用于构建响应式（根据用户设备不同做出响应）网站的前端框架， 2011 年 8 月发布的,发布之后就迅速走红。无论你想构建应用程序、博客还是CMS网站,Bootstrap 都完美适用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建稳定的网站提供了基础设施,也能提高开发效率。基于默认的网格系统,布局变成了小菜一碟,按钮、导航和表格也都活脱脱地赏心悦目。十几个 JavaScript 插件更为我们赋予网站交互能力提供了强大保障。

BootStrap适用于全栈开发，JQueryUI和EasyUI适合于后台界面开发。

1、响应式布局

响应式，就是页面可以根据用户设备不同（如：分辨率大小）对页面效果做出一些响应，它实现的关键是CSS中的"@media"属性。

示例：调整页面变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 300px;
            background-color: red;
        }
        /* 当页面宽度大于等于800时，内部的样式就会生效。 */
        @media (min-width: 800px) {
            .pg-header{
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
</body>
</html>

2、BootStrap的应用

需要先进行下载，然后再在项目中导入。

1.下载用于生产的 BootStrap包
https://v3.bootcss.com/getting-started/#download
在这里插入图片描述
2.解压缩文件夹之后，把bootstrap文件夹拷贝到项目目录，然后在页面中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BT</title>
    <!--引入BootStrap的样式，提供了大量的样式-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
 <h1>欢迎使用BootStrap</h1>
    <script src="jquery-3.4.1.min.js"></script>
    <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

3.CDN
如果使用CDN的话，无需下载BootStrap就可以直接在页面引入。

3、BootStrap样式

1.布局容器

响应式布局，当页面宽度变化时，内容的宽度会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
          padding-right: 15px;
          padding-left: 15px;
          margin-right: auto;
          margin-left: auto;
          background-color: blue;
        }
        @media (min-width: 768px) {
          .container {
            width: 750px;
          }
        }
        @media (min-width: 992px) {
          .container {
            width: 970px;
          }
        }
        @media (min-width: 1200px) {
          .container {
            width: 1170px;
          }
        }
    </style>
</head>
<body>
<div style="height:48px;background-color:red">
    <div class="container">...</div>
</div>
</body>
</html>

2.顶部导航条

基础导航条

73、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap

目录1、响应式布局2、BootStrap的应用3、BootStrap样式1.布局容器2.顶部导航条BootStrap 是一个用于构建响应式（根据用户设备不同做出响应）网站的前端框架， 2011 年 8 月发布的,发布之后就迅速走红。无论你想构建应用程序、博客还是CMS网站,Bootstrap 都完美适用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建稳定的网站提供了基础设施,也能提高开发效率。基于默认的网格系统,布局变成了小菜一碟,按钮、导航
复制链接

扫一扫

专栏目录