BootStrap概述（一）

最新推荐文章于 2024-04-27 23:07:09 发布
最新推荐文章于 2024-04-27 23:07:09 发布
阅读量921 收藏 7
点赞数 1
分类专栏： 前端框架学习 #BootStrap 文章标签： css html java web javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44861675/article/details/108804723
版权

文章目录

BootStrap概述（一）

1、什么是BootStrap

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

图解：
在这里插入图片描述

2、BootStrap的好处是什么

传统的使用HTML+CSS+JavaScript开发的网站兼容性差，当使用移动设备打开对应的网页的时候，会因为分辨率的不同，导致出现显示效果极其的差。比如下图：
在这里插入图片描述

当把它进行缩放的时候：

在这里插入图片描述

可以发现，一些部件都叠在一起了。导致了显示的效果极差。而BootStrap的出现就解决了这样的问题，因为它实现了响应式的布局效果：

在这里插入图片描述

大大改善了开发的效率和降低了维护成本。上面使用的BootStrap改写上面的黑马商城，使用电脑打开：

在这里插入图片描述

下面缩放到ipad的大小和手机的大小来看：

1、ipad的大小：

在这里插入图片描述

2、手机的大小：

在这里插入图片描述
在这里插入图片描述

所以其中的好处我们是可以看得见的。

总结好处就是：

  • 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
  • 响应式布局，使得开发成本和维护成本都降低

3、搭建BootStrap的开发环境

  • 下载BootStrap（https://v3.bootcss.com/）
    在这里插入图片描述

  • 导入相关文件(bootstrap.js、bootstrap.css、jquery.js即可)
    在这里插入图片描述

    导入完成以后，我们以后使用BootStrap都是使用基本模板了。

    基本模板

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--以下三个原标记不要动其位置，因为这三个标记直接影响到bootstrap的使用-->
    <meta charset="utf-8"><!--设置html的显示字符集-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--表示使用ie的最新渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">
   <!-- <meta name="viewport" content="width=device-width,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />-->
    <!--这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。
    一都主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面-->
    <!--这个标记很重要，分开讲：
        viewport：指的是浏览器网页的视口，
        width=device-width：表示移动设备生效
        initial-scale：页面的缩放比例，通常默认为1，数值从1~5，即100%到500%的比例。分正负数

        除了这上面的标记属性，还有三个属性：
        1、minimum-scale：最小允许的缩放比例
        2、maximum-scale：最大的允许缩放比例
        3、user-scalable:no ,不允许缩放，一旦设置，则上面的1，2，属性失效。

    -->

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>使用BootStrap的基本模板</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <!--[endif]-->
</head>
<body>
<h1>你好，世界！</h1>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>--><!--这个script在开发的时候一般
放在head里面，但是发布的时候一般放在body的最后面，因为这样子，可以先加载body的内容而后才加载脚本文件。-->
</body>
</html>

    4、BootStrap布局容器

    BootStrap的使用必须需要至少一个布局容器，才能为页面进行封装和方便的样式控制。它相当于一个画板。

    Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

    .container 类用于固定宽度并支持响应式布局的容器。

    .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

    容器类样式描述
    contianer类用于固定宽度并支持响应式布局的容器。【特点：居中，两端留白】实际例子<div class="container">....</div>
    container-fluid类用于100%的宽度，占据全部的视口（viewport）。<div class="container-fluid">..</div>

    实战例子

    打开idea，新建一个文档，代码如下：

    <!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=4,user-scalable=no">
  <title>container</title>
  
  <!-- Bootstrap -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <script src="../js/jquery-1.12.0.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
    </head>
  <body>  
        <div class="container" style="border: 1px double red">11111</div>     
  </body>
  </html>

    实际效果，1111居中且两端留白：

在这里插入图片描述

下面使用container-fluid：

<div class="container-fluid" style="border:1px double red">11111</div>

实际效果，100% 宽度，占据全部视口（viewport）的容器：
在这里插入图片描述
更加详细的用法我们可以查询帮助手册：官网——全局CSS样式——布局容器

在这里插入图片描述
在这里插入图片描述

5、栅格系统

5.1、BootStrap的栅格系统

打开全局CSS样式——栅格系统，介绍如下：

在这里插入图片描述
在这里插入图片描述

一个效果图：
在这里插入图片描述

5.2、BootStrap的栅格系统入门案例

代码

<div class="container-fluid" style="border: 1px double red">
    <div class="row"><!--第一个行，自动分割为12列-->
        <div class="col-lg-4">第一个元素占据4列</div>
        <div class="col-lg-4">第二个元素占据4列</div>
        <div class="col-lg-4">第三个元素占据4列</div>
    </div>
</div>

可以看见，一行12列，放了三个div，每个div占据了4列。

在这里插入图片描述

下面，我们对上面的视口缩放：

在这里插入图片描述
可以发现，一旦缩放，由于对应的屏幕尺寸的显示方式没有设置，导致我们的每个元素独自显示一行。

5.3、BootStrap的栅格系统的特点及深入分析

栅格特点

  • 行（row）必须包含在container（固定宽度）或container-fluid中。

  • 行使用的样式是：.row，列使用的样式是：.col，元素应当放在列（column）内。

  • 基本的书写方式同表格form，先定义容器-行-列-元素

栅格的参数

  • col-屏幕尺寸-占用列数

例子

<div class="container-fluid" style="border: 1px double red">
      <div class="row"><!--第一个行，自动分割为12列-->
          <div class="col-lg-4" style="border: 1px solid red">111111</div>
          <div class="col-lg-4" style="border: 1px solid red">222222</div>
          <div class="col-lg-4" style="border: 1px solid red">333333</div>
      </div>
  </div>

在这里插入图片描述
下面我们来探究当列的和大于小于等于12时，会发生点什么？

  • 1、当元素占据的列小于12
  <div class="row"><!--第一个行，自动分割为12列-->
            <div class="col-lg-4" style="border: 1px solid red">111111</div>
            <div class="col-lg-4" style="border: 1px solid red">222222</div>
            <div class="col-lg-1" style="border: 1px solid red">333333</div>
        </div>

在这里插入图片描述

  • 2、当元素占据的列的总和等于12

     <div class="row"><!--第一个行，自动分割为12列-->
            <div class="col-lg-4" style="border: 1px solid red">111111</div>
            <div class="col-lg-4" style="border: 1px solid red">222222</div>
            <div class="col-lg-1" style="border: 1px solid red">333333</div>
        </div>

在这里插入图片描述
所以我们可以看到如果列元素的占据列的总和小于等于12，仍然排在一行上。

  • 3、当元素占据的列的总和大于12

    <div class="row"><!--第一个行，自动分割为12列-->
            <div class="col-lg-4" style="border: 1px solid red">111111</div>
            <div class="col-lg-4" style="border: 1px solid red">222222</div>
            <div class="col-lg-8" style="border: 1px solid red">333333</div>
        </div>

效果：大于12的列元素会单独占据新的一行。
在这里插入图片描述

5.4、BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸

栅格的参数
在这里插入图片描述

屏幕尺寸的大小

  • large ，lg 大屏幕，大桌面显示器

  • medium ，md，中等屏幕，桌面显示器

  • small，sm，小屏幕，平板

  • x small xs，超小屏幕，手机

    关于xs：col-xs-* have been dropped in Bootstrap 4 in favor of col-*。BootStrap4里面，使用xs的正确姿势：如col-4；
    关于xl：超大屏幕 x large；
    关于xxl：更加大的屏幕

当设置的屏幕尺寸大的时候，这个时候通过缩放，导致每个元素单独成一行：

 <div class="row"><!--第一个行，自动分割为12列-->
          <div class="col-lg-4" style="border: 1px solid red">111111</div>
          <div class="col-lg-4" style="border: 1px solid red">222222</div>
          <div class="col-lg-4" style="border: 1px solid red">333333</div>
      </div>

原来的尺寸：
在这里插入图片描述

现在缩放：
在这里插入图片描述
当设置的屏幕尺寸为sm的时候，这个时候，会有一个继承属性，使得当屏幕尺寸大于sm的时候，能够正常显示一行：

<div class="row"><!--第一个行，自动分割为12列-->
         <div class="col-sm-4" style="border: 1px solid red">111111</div>
         <div class="col-sm-4" style="border: 1px solid red">222222</div>
         <div class="col-sm-4" style="border: 1px solid red">333333</div>
     </div>

在这里插入图片描述

放大：
在这里插入图片描述
放大到lg的：
在这里插入图片描述
但是缩小到xm还是会变：
在这里插入图片描述

这种情况我们可以使用：（我这里使用了两个行来对比）

<div class="row"><!--第一个行，自动分割为12列-->
        <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">111111</div>
        <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">222222</div>
        <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">333333</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div>
    </div>

在这里插入图片描述
可以看出，设置了ms的，缩放到ms可以显示一行。而下面的只设置了sm的无法显示一行。这就是向上可以继承。下则需要设置。

5.5、 栅格系统的列偏移

在这里插入图片描述

上面的设置偏移是通过设置一个空的div，这样不好。实际上是通过：

在这里插入图片描述

<!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=4,user-scalable=no">

    <title>列偏移</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 1px solid red">
    <div class="col-md-4" style="border: 1px solid red">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3" style="border: 1px solid red">.col-md-6 .col-md-offset-3</div>
</div>
</body>
</html>

在这里插入图片描述

雨夜※繁华
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
第一章之初识Bootstrap
09-02
1. **Bootstrap 概述** Bootstrap 的诞生源于 Twitter 内部解决前端开发协作统一的问题。自 2011 年首次发布以来，经过多次迭代，Bootstrap 已发展成为一个功能丰富的框架，支持响应式布局，适用于各种设备，从小型...
Bootstrap技术介绍
beginnerdzz的博客
08-05 1675
Bootstrap技术介绍 1.介绍 Twitter公司发明的技术 用Bootstrap做的网页，能狗自动适应屏幕大小（自适应，响应式） 移动优先（Bootstrap伴随着智能手机而来） Bootstrap技术是基于：HTML、CSS、JavaScript Bootstrap本质：写好的CSS样式库（拿来就用） Bootstrap不是编程语言，是一种技术。 2. Bootstrap如何使用 第1种 把Bootstrap文件从官网下载下来，复制到自己的项目里 第2种 直接使用CDN（内容分发网络，其实就是放在
Bootstrap简述
weixin_71437031的博客
08-18 2856
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
BootStrap详解
最新发布
weixin_45845391的博客
04-27 1400
Bootstrap简介 什么是BootStrap？ BootStrap来自Twitter，是目前最受欢迎的响应式前端框 Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷 为什么使用Bootstrap？ 移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库移动设备优先的样式。 - 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中 - 也就是说，针对移动设备的样式融合进了框架的每个角度，而不是增加一个额外的文件
Bootstrap是什么
weixin_35757191的博客
12-29 419
Bootstrap是一种用于开发响应式、移动优先的网站和应用程序的开源前端框架。它包含了 HTML 和 CSS 样式表、字体图标、JavaScript 插件等，可以让开发者快速地搭建网站或应用程序的用户界面。Bootstrap 是跨浏览器的，它的样式表基于最新的 CSS3 和 HTML5 技术，并且是响应式的，可以根据屏幕尺寸自动调整布局。Bootstrap 能够帮助开发者快速构建兼容各种设备的网...
大白话讲解Bootstrap是什么
Miracle.Zhao的博客
02-25 3万+
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。 Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。 此外，还有大量其他有用的前端组件，比如 Dropdowns、Navigation、...
Bootstrap基本介绍
m0_68756200的博客
03-31 1万+
Bootstrap 一、Bootstrap是什么 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容
bootStrap学习
01-25
**一、BootStrap概述** Bootstrap是由Twitter开发的开源框架，它的目标是提供一套简洁、直观、强大的工具，帮助开发者快速创建美观且功能齐全的网页设计。核心特性包括响应式布局、移动设备优先、易于使用的组件和...
Zend Framework教程之Bootstrap类用法概述
10-22
主要介绍了Zend Framework教程之Bootstrap类用法,简单分析了Bootstrap的功能,定义,相关参数与使用方法,需要的朋友可以参考下
《响应式网页开发实战》教学课件12Bootstrap概述.pdf
06-23
《响应式网页开发实战》教学课件12Bootstrap概述.pdf《响应式网页开发实战》教学课件12Bootstrap概述.pdf《响应式网页开发实战》教学课件12Bootstrap概述.pdf《响应式网页开发实战》教学课件12Bootstrap概述.pdf...
Bootstrap开发资料
01-08
1. **Bootstrap概述**： Bootstrap是由Twitter开发并开源的一款快速、强大且具有高度可定制性的前端框架，它提供了丰富的HTML、CSS和JS组件，简化了网页设计和开发过程。其响应式设计使得网页在不同设备上都能呈现...
Bootstrap里的文件作用
11-29 725
Bootstrap里的文件分别表示什么？都有什么用？ bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap.js bootstrap.min.js 回答：bootstrap.css 是完整的bootstrap样式表，未经...
bootstrap中怎么样使按钮居中
热门推荐
fjnjxr的博客|PHP每周一贴
07-10 4万+
总结一下以下几种方法： 在bs中表现按钮的方法有两种： １.关于 元素 　只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。 　   　... 　 复制代码 ２.关于 元素 　为了将 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each b
科普帖：什么是Bootstrap？Bootstrap开发框架入门
WPHunter的编程技术资料库！
01-08 1571
本文将介绍使用Bootstrap的好处并解释它使用的不同文件类型。到最后，您将知道Bootstrap是否可以使您的工作流程受益。
BootStrap样式笔记
q_1092535160的博客
05-06 827
bootstrap中的居左和居右 1、pull-left和pull-right 2、text-left、text-center和text-right 一点点更新
Bootstrap简介
归兮的博客
08-18 8501
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
BootStrap简介与快速体验
redrose2100的博客
09-27 561
本文详细介绍了BootStrap的简介、下载安装以及快速体验
统计学中的Bootstrap方法（有放回的抽样）
青年有志
05-21 5315
Bootstrap又称自展法、自举法、自助法、靴带法 , 是统计学习中一种重采样(Resampling)技术，用来估计标准误差、置信区间和偏差Bootstrap是现代统计学较为流行的一种统计方法，在小样本时效果很好。机器学习中的Bagging，AdaBoost等方法其实都蕴含了Bootstrap的思想，在集成学习的范畴里 Bootstrap直接派生出了Bagging模型.用子样本来类比总体我要统计鱼塘里面的鱼的条数，怎么统计呢？假设鱼塘总共有鱼1000条，我是开了上帝视角的，但是你是不知道里面有多少。
bootstarp模态框按钮居中 （一左一右 垂直水平居中）
huang_ftpjh的博客
10-25 2907
因为按钮在底部栏<div class="modal-footer"> 要想让按钮一左一右显示 需要在按钮标签上加一个 div 这样就可以进行位置变动 获取模态框的宽度 自定义按钮位置 <div class="modal fade" id="Ascertainmsg" tabindex="-1" role="dialog" aria-label...
bootstrap概述
06-03
Bootstrap是一个流行的前端开发框架，它由Twitter开发并开源。它提供了一系列的CSS、JavaScript组件和工具，可以帮助开发者快速构建现代化的响应式网站和Web应用程序。Bootstrap的主要特点包括： 1. 响应式设计：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨夜※繁华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值