Bootstrap学习

最新推荐文章于 2024-05-16 07:12:57 发布
最新推荐文章于 2024-05-16 07:12:57 发布
阅读量200 收藏
点赞数 1
分类专栏： 学习 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56180999/article/details/117460399
版权

Bootstrap学习

文章目录

一、Bootstrap介绍

1.Bootstrap官网

https://www.bootcss.com/

2.Bootstrap官网(入门)下载

https://v3.bootcss.com/getting-started/

3.Bootstrap全局CSS样式

https://v3.bootcss.com/css/

二、Bootstrap使用(https://v3.bootcss.com/getting-started/)

1.bootstrap框架具体内容

bootstrap具体框架模板使用去官网查看学习使用

2.bootstrap基于

bootstrap必须基于jquery,所以在引用bootstrap.min.js之前，先引用jquery.min.js。

3.jquery下载

https://jquery.com/download/

可以不用下载jquery文件，直接引用网页版的jquery-3.5.1.min.js文本

4.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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> 官网地址引入 -->
      <!-- 本地引入 -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

    <!-- 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>
  
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> 官网地址引入 -->
    <!-- 本地引入 -->
    <script src="jquery/jquery-3.5.1.min.js"></script>
    
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> 官网地址引入 -->
      <!-- 本地引入 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

5.补充

CSS重置样式： 为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

三、Bootstrap框架

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

1.流体容器

<div class="container-fluid">
  ...
</div>

2.固定容器

<div class="container">
  ...
</div>

3.固定容器

/固定值/范围width
大屏PC（lg）$>=120011701140+槽宽
中屏PC（md）992<=$<1200970970+槽宽
平板（sm）768<=$<992750720+槽宽
移动手机（xs）$<768auto

4.栅格系统

a.媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
b.栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是
c.实例
<div class="container">
  <div class="row">		<!-- 行 -->
      <div class="col-lg-a"></div>	<!-- 列 -->
      ...
      <div class="col-lg-l"></div>	<!-- 列 -->
      <!-- 注意默认把每行分为12份，按数值比例分配给每列，a+b+...+l=12 -->
  </div>
</div>
d.栅格系统源代码分析
i.流体容器和固定容器公共样式
margin-right:auto;
margin-left:auto;
padding-left:floor((@gutter/2));	//15px
padding-right:ceil((@gutter/2));	//15px
ii.固定容器：特定样式

！顺序不可变：

@media(min-width:@screen-sm-min){
	width:@container-sm;
}
@media(min-width:@screen-md-min){
	width:@container-md;
}
@media(min-width:@screen-lg-min){
	width:@container-lg;
}
iii.行
margin-left:ceil((@gutter/-2))	//-15px
margin-right:floor((@gutter/-2))	//-15px
iv.列

  • 公共样式

    .make-grid-columns()	//混合
/*
*.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,
*...
*.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{
*	position:relative;
*	min-height:1px;
*	padding-left:15px;
*	padding-right:15px;
*}
*/

  • 浮动

    .make-grid(xs)
/*
*.float-grid-columns(@class);
*	/*.col-xs-1,.col-xs-2,...,.col-xs-12{
*	*float:lelft;
*	*}
*	*/
*.loop-grid-columns(@grid-clumns,@class,width)
*	/*.col-xs-12{
*	*width:12/12;
*	*}
*	*...
*	*.col-xs-1{
*	*width:1/12;
*	*}
*	*/
*.loop-grid-columns(@grid-clumns,@class,pull)	//列排序
*.loop-grid-columns(@grid-clumns,@class,push)	//列排序
*	//push:
*		/*.col-xs-push-12{
*		*left:12/12;
*		*}
*		*...
*		*.col-xs-push-0{
*		*left:auto;
*		*}
*		*/
*	//pull:
*		/*.col-xs-pull-12{
*		*right:12/12;
*		*}
*		*...
*		*.col-xs-pull-0{
*		*right:auto;
*		*}
*		*/
*.loop-grid-columns(@grid-columns,@class,offset);	//列偏移
*	/*
*	*.col-xs-offset-12{
*	*	margin-left:12/12;
*	*}
*	*...
*	*.col-xs-offset-0{
*	*	margin-left:0;
*	*}
*	*/
*	//<sm,md,lg与之相似>
*/

  • 混合组合：将xs,sm,md,lg要用的格式写入class=“*”中，将会在不同PC情况下执行不同选项：xs、sm、md、lg，用列排序时每个PC选项都要写，不能跳跃。

e.自定义栅格系统

将源代码中的变量名改为自己定义的变量名。

f.栅格盒模型的精妙

#容器两边具有15px的padding

#行两边具有-15px的margin

#列两边具有15px的padding

#为了维护槽宽的规则：

​ *列两边必须要有15px的padding

#为了使列嵌套行：

​ *行两边必须要有-15px的margin

#为了让容器可以包裹住行：

​ *容器两边必须要有15px的padding

5.响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

a.可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

6.less继承

#test{
	&:extend(.father);
}

#test:extend(.father){
	...;
}	//基本不用

继承实质上是将.father选择器和#test选择器组合成一个选择器

​ 声明块使用.father的

​ all：继承所有和.father相关的声明块

*切记父类不能定义成混合（继承不灵活 但性能高，混合灵活但性能低）

7.bootstrap定制化

做项目时，一些面向企业的图形界面制作（如：含图标）可以在网上下载模板，然后进行需求修改，减少自己编码。修改方法：1、直接在源码上修改（不推荐）；2、自己写一个less文件，然后把要编译的源代码文件作为混合引入进自己写的less文件，最后把自己要修改的部分在less文件中重新按需求编码，最后把less转为css使用即可。

8.bootstrap常用组件和插件

i.下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

  • 实例

    将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

  • 对齐

    B默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

  • 分割线

    为下拉菜单添加一条分割线，用于将多个链接分组。

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>
ii.导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

在标签页上使用导航需要依赖 JavaScript 标签页插件

由于标签页需要控制内容区的展示，因此，你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性 – 详细信息请参考该插件的 实例。

确保导航组件的可访问性

如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav>元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。

  • 标签页

    注意 .nav-tabs 类依赖 .nav 基类。

    <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

地址：https://v3.bootcss.com/components/#nav

9.导航条

  • 默认样式的导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

  • 导航条内所包含元素溢出

由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：

  1. 减少导航条内所有元素所占据的宽度。
  2. 在某些尺寸的屏幕上利用 响应式工具类来隐藏导航条内的一些元素。
  3. 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  • 固定在底部

添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

需要为 body 元素设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给 `` 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。

  • 静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>
  • 反色的导航条

通过添加 .navbar-inverse 类可以改变导航条的外观。

<nav class="navbar navbar-inverse">
  ...
</nav>

地址：https://v3.bootcss.com/components/#navbar

10.轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

地址：https://v3.bootcss.com/javascript/#collapse

11.模态框

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

地址：https://v3.bootcss.com/javascript/#modals

bootStrap学习
01-25
这个"BootStrap学习"资源很可能是为了帮助初学者或者开发者掌握BootStrap3.3.7版本的基础和进阶技巧。BootStrap3是BootStrap的第三个主要版本，它在2013年发布，并在后续几年内得到了广泛的应用和更新，提供了丰富的...
bootstrap学习
02-14
这个"bootstrap学习"的压缩包显然包含了一些基本的学习资源，让我们详细探讨一下Bootstrap的主要知识点。 首先，Bootstrap的核心特性在于其响应式网格系统。这个系统基于12列的布局，允许开发者通过简单的类选择器...
分享一个bootdtrap3.0可视化布局系统
gnsydss的专栏
01-05 949
之前用过2.0的 http://www.bootcss.com/p/layoutit/ 3.0的一直都没找到，最近才找到，很好很强大啊 http://www.ibootstrap.cn/ 还有个表单构造器 http://www.bootcss.com/p/bootstrap-form-builder/
Bootstrap 学习文档
qq_52289068的博客
09-01 1754
Bootstrap相关介绍
BootStrap框架学习
shenghuo12582的博客
04-23 775
名称bs标题1<span class="small">副标题</span></div><li class="dropdown-header">--各类内容2</li><div class="col-md-8">8列</div><div class="col-md-1 col-md-offset-8">偏移整体推
BootStrap学习网站
weixin_44649811的博客
08-30 2143
简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)
Bootstrap学习笔记
2401_84102759的博客
05-16 1061
在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！大家看完有什么不懂的可以在下方留言讨论也可以关注。本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录需要这份系统化的资料的朋友，可以点击这里获取有更细化的内容！**大家看完有什么不懂的可以在下方留言讨论也可以关注。本文已被。
bootstrap学习总结
qq_41898129的博客
08-20 1012
一.表单 .form-group:表单排版整齐, .form-inline:内联表单使表单一行排列 .form-control:使input内容占据父元素的宽度的100% .form-horizontal:水平排列的表单,结合栅格类一起使用 &lt;form class="form-horizontal"&gt;   &lt;div class="form-group"&gt;     &lt;l...
BootStrap学习笔记
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
08-20 1047
BootStrap学习笔记 官网：https://getbootstrap.com/ 中文网：https://www.bootcss.com/
Bootstrap学习一
2301_78630677的博客
01-05 1031
一个用于快速开发Web应用程序和网站的前端框架Bootstrap 非常流行，这得益于它非常实用的功能和特点。主要核心功能特点如下：可以从 Bootstrap官网上下载 Bootstrap 的最新版本。也可以选择不下载Bootstrap，直接使用 Bootstrap CDN库，国内推荐使用 BootCDN 上的库。
Bootstrap学习心得
wsy_2979的博客
12-11 2224
Bootstrap简介        Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Les...
分享bootstrap学习笔记心得(组件及其属性)
11-29
Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、...
BootStrap学习手册.pdf
04-04
Bootstrap是一款流行的前端开发框架，由Twitter推出，其设计理念在于简化web开发流程，特别是响应式网页设计。它包含了HTML、CSS以及JavaScript的框架，允许开发者利用一套标准化的组件来快速构建现代化、响应式的...
HTML，CSS，bootStrap学习笔记.zip
最新发布
11-08
资源简介《HTML，CSS，Bootstrap学习笔记》是一个综合性的学习资源包，旨在帮助初学者和进阶开发者全面掌握前端开发的基础知识和技能。本资源包涵盖了HTML、CSS和Bootstrap这三个前端开发的核心领域，通过详细的笔记...
bootstrap学习笔记
06-17
在“Bootstrap学习笔记”中，作者强调了为什么应该使用Bootstrap，并介绍了其包内容和如何通过在线实例快速上手。学习笔记中还包含了关于Bootstrap环境的安装指南，包括如何下载Bootstrap和理解其文件结构。作者建议...
bootstrap学习资料2
08-23
这个"bootstrap学习资料2"的压缩包包含了一系列与Bootstrap相关的资源，包括文档、教程和实际模板，帮助开发者深入理解和掌握Bootstrap的核心功能和应用。 首先，Bootstrap JavaScript插件是Bootstrap框架的重要...
bootstrap 学习
05-26
4. 学习Bootstrap的扩展库：Bootstrap有许多扩展库，例如Bootstrap Material Design、BootstrapVue等，可以进一步扩展Bootstrap的功能和应用范围。你可以学习这些扩展库，并尝试将其应用到你的项目中。 5. 查阅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值