Bootstrap学习与引导

最新推荐文章于 2022-11-07 09:30:41 发布
最新推荐文章于 2022-11-07 09:30:41 发布
阅读量322 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42335440/article/details/80906204
版权

Bootstrap:让web开发更迅速、简单：可以直接抄，抄过去就能用。

链接：http://www.bootcss.com/

Bootstrap核心学习：

全局Css样式：

布局容器：（★）

布局容器：相当于一张画布，后期再画布中添加页面的内容。

 翻译：在绘画之前，先准备一个画布，两个画布不要重叠。

测试代码：

<!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 href="css/bootstrap.min.css" rel="stylesheet">

 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<div class="container">

<h1>你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！</h1>

</div>

<div class="container-fluid">

<h1>你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！</h1>

</div>  

  </body>

</html>


 

栅格系统：（★★★★★）

什么是栅格系统？

我们习惯于使用表格来给页面画格子，方便我们整齐有序地将内容填充到页面，但是每次自己画格子，太麻烦，所以Bootstrap提供了一个写好的“表格”给我们使用——这个就是栅格系统。

Bootstrap栅格系统发挥两个作用：

1、对页面进行布局

2、根据设备屏幕，自动调节内容的排列

 

 栅格系统快速入门：（★★★★★）

栅格：为了防止以前的表格，会出现，网页缩小，内容跟着缩小的缺点。栅格系统可以根据当前页面大小，去改变栅格中的数据排列组合方式。

如果页面变小，将栅格内容，从横向排列改成纵向排列。

需求：按照如图所示，画出格子

 

素材样式：

<style type="text/css">

div{

    border: 1px solid red;

}

</style>

普通表格:

<table border="2px" bordercolor="red" width="100%">

<tr><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td><td>我是表格......</td></tr>

<tr><td colspan="8">我是表格......</td><td colspan="4">我是表格......</td></tr>

<tr><td colspan="4">我是表格......</td><td colspan="4">我是表格......</td><td colspan="4">我是表格......</td></tr>

<tr><td colspan="6">我是表格......</td><td colspan="6">我是表格......</td></tr>

</table>

 

代码：

<!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 href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<style type="text/css">

div {

border: 1px solid red;

}

</style>

</head>

 

<body>

<div class="container-fluid">

<div class="row">

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

</div>

<div class="row">

<div class="col-md-8">.col-md-8</div>

<div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

<div class="col-md-6">.col-md-6</div>

<div class="col-md-6">.col-md-6</div>

</div>

</div>

</body>

</html>


那么如果我们需要控制当屏幕在多大范围的时候，进行，页面的适配，我们可是设置一些参数：

以下文字是下图的翻译：

.col-xs-xx ——在超小屏幕下（小于768像素）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

.col-sm-xx ——在小屏幕下（大于768像素下，且小于992像素）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

.col-md-xx ——在中等屏幕下（大于992像素下，且小于1200像素）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

.col-lg-xx ——在超小屏幕下（大于1200像素下）使用当前样式，占用屏幕的一整行中xx个栅格（xx是数字最多12个）

 

 

栅格测试代码：

<!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 href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<style type="text/css">

div {

border: 1px solid red;

}

</style>

</head>

 

<body>

<div class="container-fluid">

<div class="container-fluid">

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<div class="row">

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<!-- Optional: clear the XS cols if their content doesn't match in height -->

<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

</div>

</div>

</div>

</body>

</html>


3.1.4 排版：（★）

标题

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

<h4>h4. Bootstrap heading <small>Secondary text</small></h4>

<h5>h5. Bootstrap heading <small>Secondary text</small></h5>

<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

 

 

1.5 对齐（★）

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<!--超出页面显示范围不换行-->

<p class="text-nowrap">No wrap text.</p>

 

 

对齐的时候有一个问题：

测试代码：

<span class="text-center">Hello Word</span>

没有居中的效果，因为span不是单独占用一行

  内联列表：（★）

内联列表：通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

 

<ul class="list-inline">

   <li>Lorem ipsum</li>

   <li>Phasellus iaculis</li>

   <li>Nulla volutpat</li>

</ul>

 

表格：（★）

<table class="table">

      <caption>Optional table caption.</caption>

      <thead>

        <tr>

          <th>#</th>

          <th>First Name</th>

          <th>Last Name</th>

          <th>Username</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <th scope="row">1</th>

          <td>Mark</td>

          <td>Otto</td>

          <td>@mdo</td>

        </tr>

        <tr>

          <th scope="row">2</th>

          <td>Jacob</td>

          <td>Thornton</td>

          <td>@fat</td>

        </tr>

        <tr>

          <th scope="row">3</th>

          <td>Larry</td>

          <td>the Bird</td>

          <td>@twitter</td>

        </tr>

      </tbody>

    </table>

 

 表单：（★）

<form>

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

  <div class="form-group">

    <label for="exampleInputFile">File input</label>

    <input type="file" id="exampleInputFile">

    <p class="help-block">Example block-level help text here.</p>

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> Check me out

    </label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button></form>

 

 

 内联表单：（★）

内联表单：行级表单

<form class="form-inline">

  <div class="form-group">

    <label for="exampleInputName2">Name</label>

    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

  </div>

  <div class="form-group">

    <label for="exampleInputEmail2">Email</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

  </div>

  <button type="submit" class="btn btn-default">Send invitation</button></form>

 

 

 按钮：（★）

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

 

 

图片：（★）

<img src="img/1.jpg" alt="..." class="img-rounded img-responsive">

<img src="img/2.jpg" alt="..." class="img-circle img-responsive">

<img src="img/3.jpg" alt="..." class="img-thumbnail img-responsive">

Ps：通过为图片添加 .img-responsive 类可以让图片支持响应式布局。

 

 Bootstrap组件：

 

 

 字体图标（★）

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

 

注意，这个字体图标其实是一个文本,调整大小可以使用style="font-size: 60px;"

<span class="glyphicon glyphicon-search" aria-hidden="true" style="font-size: 60px;"></span><br>

效果：

 

 下拉菜单（★）

Div和无需列表的组合

<!DOCTYPE html>

<html>

 

<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 href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

</head>

 

<body>

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

    Dropdown1111

    <span class="caret"></span>

  </button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

<li>

<a href="#">Action222</a>

</li>

<li>

<a href="#">Another action3333</a>

</li>

<li>

<a href="#">Something else here4444</a>

</li>

<li role="separator" class="divider"></li>

<li>

<a href="#">Separated link555</a>

</li>

</ul>

</div>

</body>

 

</html>


3.2.3 输入框组（★）

<div class="input-group">

<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">

<span class="btn btn-default input-group-addon glyphicon glyphicon-search" id="basic-addon2"></span>

</div>

效果：

 

 导航条（★）

<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>

 

分页条

<nav aria-label="Page navigation">

  <ul class="pagination">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">«</span>

      </a>

    </li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">»</span>

      </a>

    </li>

  </ul>

</nav>

 

 

 

3.3 Bootstrap插件（★）

  模态框（★）

<!DOCTYPE html>

<html>

<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 href="../css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

</head>

<body>

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

  Launch demo modal

</button>

 

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <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">×</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        ...

      </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>

  </div>

</div>

</body>

</html>

 

  

轮播图Carousel（★）

<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="img/1.jpg" alt="...">

<div class="carousel-caption">

...

</div>

</div>

<div class="item">

<img src="img/2.jpg" alt="...">

<div class="carousel-caption">

...

</div>

</div>

<div class="item">

<img src="img/3.jpg" 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>

 

Little time
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个人初学bootstrap并搭建后台界面代码
linpiaohsin的博客
08-12 1243
@media only screen and (min-width:768px ) { #topLeft{ position: absolute; width: 220px; margin-top: 20px; } } @media only screen and (min-width: 768px) { #mainp{ margin-left: 250px; } }
Bootstrap学习上
后知后觉的博客
11-03 201
Bootstrap学习上
基于Bootstrap的步骤引导html页面样式
09-09
基于Bootstrap的步骤引导html页面样式，实现下一步下一步引导的UI。修改了积分为固定1积分，不再增加
【Netty】Bootstrap引导
LoveSummer
02-04 770
Bootstrap引导 在了解ChanelPipeline，EventLoop等组件之后，我们需要将这些组件组织起来，使其成为一个可运行的应用程序。 这里就需要引导这些组件了。 Bootstrap类 引导类的层次结构包括一个抽象的父类和两个具体的引导子类： ServerBootstrap总是需要一个ServerSocketChannel来处理客户端的连接通信，而 Bootstrap则只需要一个普通的Channel用于与服务端的通信。 下面是AbstractBootstrap的主要方法： 方法 描述
Bootstrap的步骤引导html页面样式
09-14
基于Bootstrap的步骤引导html页面样式，实现下一步下一步引导的UI
基于Bootstrap的步骤引导html页面
weixin_33751566的博客
09-09 953
美工设计了一个下一步下一步的引导效果界面，百度谷歌了很久没有找到合适的控件，就想着能不能借助Bootstrap的标签页修改下，实现后的效果如下。 实现思路是先PS三张小图片，作为步骤之间引导的箭头，如下。 然后bootstrap本身的tab 的li就设置背景色为对应的蓝色或者灰色。然后在写js方法，实现点击切换时候控制图片src和Li的背...
Bootstrap学习下
最新发布
后知后觉的博客
11-07 1276
Bootstrap学习下
Icoder-bootstrap:学习引导平台
03-10
"Icoder-bootstrap"是一个学习引导平台，它主要基于HTML技术构建，旨在为用户提供一个交互式的、易用的学习环境。HTML（HyperText Markup Language）是互联网上应用最广泛的语言，用于创建和设计网页。在这个项目中...
BootStrap入门学习第一篇
12-02
这篇“BootStrap入门学习第一篇”旨在引导初学者了解如何开始使用这个强大的工具。以下是主要的知识点： 1. **环境搭建**： - 首先，你需要从BootStrap的中文官方网站（http://www.bootcss.com）下载最新的...
Bootstrap:引导程序
03-17
9. **兼容性和可扩展性**：Bootstrap与各种现代浏览器兼容，并且可以通过第三方插件和库进行扩展，如Bootstrap Datepicker、Select2等。 10. **版本更新**：Bootstrap会定期发布新版本，修复已知问题，添加新功能，...
一个由StartBootstrap创建的响应式引导页面模板
08-11
一个由Start Bootstrap创建的响应式引导页面模板
bootstrap：简单的引导页面
02-13
引导程序
Bootstrap的步骤进度条
12-06
Bootstrap的步骤进度条Bootstrap的步骤进度条Bootstrap的步骤进度条
bootstrap:添加引导主题
06-23
"添加引导主题"通常是指对Bootstrap的基础样式进行定制，以满足特定项目的需求，使其具有独特的外观和感觉。在Bootstrap中，我们可以利用其丰富的预定义组件、布局工具和自定义选项来创建美观且功能丰富的登陆页面。...
完成管理平台的bootstrap界面布局
张人杰的博客
02-03 9418
此次研发的是单独的后台管理系统，能够自动适配手机屏幕及电脑屏幕，功能上包括角色的管理、用户的管理、权限的分配、权限项的管理，所有操作记入操作日志。
Netty入门-Bootstrap引导详解
码农杰森
08-12 825
前言 前几节深入学习了ChannelPipeline、ChannelHandler和EventLoop后，接下来的问题是：“如何让这些ChannalPipline、ChannelHandler和EventLoop一起有效组合成一个可以实际运行的应用程序呢？”答案是：Bootstrap(引导)。简单来说Bootstrap是一个应用程序中启动过程中的配置，通过这些配置让应用程序能正常的运行起来的一个过程；这个概念有点像操作系统的启动过相近，操作系统的启动过程同样有一个引导的过程。 Bootstrap 在开始讲.
启动引导类Bootstrap模块
奇点
04-07 1059
目录 启动引导类Bootstrap模块 1）服务器启动引导类ServerBootstrap 1) group :设置线程组模型，Reactor线程模型对比EventLoopGroup 2）channel：设置channel通道类型NioServerSocketChannel、OioServerSocketChannel 3) ***** op...
Bootstrap Modal的“上一步”，“下一步”切换功能的实现
热门推荐
无懈一击的博客
06-19 1万+
1.功能分析  当我们注册用户信息的时候，系统会弹出一个模态框。如果需要填写的表单信息比较多，就会按照模块分步骤显示。当第一个模块填写完毕后，我们点击下一步，则下一个模块会覆盖当前模块，直到最后提交。同时，我们也可以返回上一步，重新填写。   笔者针对代码的重用性和拓展性，实现了一个Bootstrap Modal分步填写表单的小插件，同时兼顾首页，尾页，中间页，单页等情况下的模块切换方式，代码尽力
Bootstrap前端框架学习详解
"Bootstrap学习笔记" Bootstrap是一个流行的开源前端框架，由Twitter开发并维护，它提供了丰富的组件和样式，帮助开发者快速构建响应式和移动优先的网页。这个学习笔记涵盖了Bootstrap的基础知识和关键特性，适合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值