Bootstrap应用

最新推荐文章于 2023-10-31 01:19:39 发布
最新推荐文章于 2023-10-31 01:19:39 发布
阅读量286 收藏 1
点赞数
分类专栏： Bootstrap 文章标签： bootstrap javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124695097
版权

文章目录

bootstrap实现导航栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />

    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <style></style>
  </head>
  <body>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- 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="#">现代浏览器博物馆</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="#">综述 <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">简述</a></li>
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
                >特点 <span class="caret"></span
              ></a>
              <ul class="dropdown-menu">
                <li><a href="#">Chrome</a></li>
                <li><a href="#">firefox</a></li>
                <li><a href="#">Safari</a></li>
                <li><a href="#">Opear</a></li>
                <li><a href="#">IE</a></li>
              </ul>
            </li>
             <li><a href="#">关于</a></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </body>
  <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="../js/bootstrap.js"></script>
</html>

效果：

在这里插入图片描述

Bootstrap实现轮播图

可以通过属性控制轮播效果，也可以通过js、jQuery控制轮播效果

  • 属性控制轮播效果：（格式是data-属性名）
<div data-interval="1000">
  • jQuery控制轮播效果
      $(function (){
         $('.carousel').carousel({
             interval:200,//控制时间
             pause:null,//鼠标放上去是否移动
             wrap:false
         }) 
      })

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />

    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
    <style>
        body{
            height: 1200px;
        }
        .carousel-inner img{
            width: 100%;
        }
        .damu-carousel{
            margin-top: 50px;
        }
        .damu-carousel,.damu-carousel .item{
            width: 100%;
            margin: 0 auto;
            height: 400px;
            overflow: hidden;
        }
        .carousel-caption{
            bottom: 10%;
        }
        @media only screen and (max-width:768px) {
            .damu-carousel,.damu-carousel .item{
                width: 100%;
                margin: 0 auto;
                height: 200px;
                overflow: hidden;
            }
            .carousel-caption{
            bottom: 10%;
            }
        }
    </style>
  </head>
  <body>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <!-- 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="#">现代浏览器博物馆</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="#">综述 <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">简述</a></li>
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
                >特点 <span class="caret"></span
              ></a>
              <ul class="dropdown-menu">
                <li><a href="#">Chrome</a></li>
                <li><a href="#">firefox</a></li>
                <li><a href="#">Safari</a></li>
                <li><a href="#">Opear</a></li>
                <li><a href="#">IE</a></li>
              </ul>
            </li>
             <li><a href="#">关于</a></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>

    <!-- 轮播图 -->
    <div id="carousel-example-generic" class="carousel slide damu-carousel" data-ride="carousel" data-interval="1000">
        <!--  小圆点 -->
        <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>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox"> 
            <div class="item active">
            <img src="./img/babeljs.png" alt="babeljs">
            <div class="carousel-caption">
                <h3>babeljs</h3>
            </div>
            </div>
            <div class="item">
            <img src="./img/boot.png" alt="boot">
            <div class="carousel-caption">
                <h3>boot</h3>
            </div>
            </div>
            <div class="item">
            <img src="./img/react.png" alt="react">
            <div class="carousel-caption">
               <h3>react</h3>
            </div>
            </div>
            <div class="item">
            <img src="./img/typescript.png" alt="typescript">
            <div class="carousel-caption">
               <h3>typescript</h3>
            </div>
            </div>
            <div class="item">
            <img src="./img/webpack.png" alt="webpack">
            <div class="carousel-caption">
               <h3>webpack</h3>
            </div>
            </div>
        </div>

        <!-- 按钮 -->
        <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>
  </body>
  <script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="./js/bootstrap.js"></script>
  <script>
    //   可以通过style控制轮播效果，也可以通过js、jQuery控制轮播效果
      $(function (){
         $('.carousel').carousel({
             interval:2000,//控制时间
             pause:null,//鼠标放上去是否移动
             wrap:false
         }) 
      })
  </script>
</html>

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

实现一个简单的网页，效果如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />

    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
    <style>
      body {
        height: 1200px;
      }
      .carousel-inner img {
        width: 100%;
      }
      .damu-carousel {
        margin-top: 50px;
      }
      .damu-carousel,
      .damu-carousel .item {
        width: 100%;
        margin: 0 auto;
        height: 400px;
        overflow: hidden;
      }
      .carousel-caption {
        bottom: 10%;
      }
      @media only screen and (max-width: 768px) {
        .damu-carousel,
        .damu-carousel .item {
          width: 100%;
          margin: 0 auto;
          height: 200px;
          overflow: hidden;
        }
        .carousel-caption {
          bottom: 10%;
        }
      }
      .damu-sl {
        margin-top: 50px;
      }
      .liner > hr {
        margin: 50px auto;
        border-top: 1px solid palevioletred;
      }
    </style>
  </head>
  <body>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <!-- 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="#">现代浏览器博物馆</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="#">综述 <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">简述</a></li>
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
                >特点 <span class="caret"></span
              ></a>
              <ul class="dropdown-menu" id="damu-nav">
                <li><a href="#babeljs">babeljs</a></li>
                <li><a href="#react">react</a></li>
                <li><a href="#typescript">typescript</a></li>
                <li><a href="#boot">boot</a></li>
                <!-- <li><a href="#">IE</a></li> -->
              </ul>
            </li>
            <li>
              <a href="javascript:;" data-toggle="modal" data-target="#myModal"
                >关于</a
              >
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>

    <!-- 轮播图 -->
    <div
      id="carousel-example-generic"
      class="carousel slide damu-carousel"
      data-ride="carousel"
      data-interval="5000"
    >
      <!--  小圆点 -->
      <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>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="./img/babeljs.png" alt="babeljs" />
          <div class="carousel-caption">
            <h3>babeljs</h3>
          </div>
        </div>
        <div class="item">
          <img src="./img/boot.png" alt="boot" />
          <div class="carousel-caption">
            <h3>boot</h3>
          </div>
        </div>
        <div class="item">
          <img src="./img/react.png" alt="react" />
          <div class="carousel-caption">
            <h3>react</h3>
          </div>
        </div>
        <div class="item">
          <img src="./img/typescript.png" alt="typescript" />
          <div class="carousel-caption">
            <h3>typescript</h3>
          </div>
        </div>
        <div class="item">
          <img src="./img/webpack.png" alt="webpack" />
          <div class="carousel-caption">
            <h3>webpack</h3>
          </div>
        </div>
      </div>

      <!-- 按钮 -->
      <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>

    <!-- 三列布局（栅格布局） -->
    <div class="container damu-sl">
      <div class="row">
        <div class="col-md-4 text-center">
          <img src="./img/babeljs.png" />
          <div class="caption">
            <h3>babeljs</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
              eos voluptatibus quasi quaerat quas consequuntur dignissimos
              eligendi, doloremque laborum culpa a neque ab, enim sit autem
              harum rem quo sequi.
            </p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
          </div>
        </div>
        <div class="col-md-4 text-center">
          <img src="./img/react.png" />
          <div class="caption">
            <h3>react</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
              eos voluptatibus quasi quaerat quas consequuntur dignissimos
              eligendi, doloremque laborum culpa a neque ab, enim sit autem
              harum rem quo sequi.
            </p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
          </div>
        </div>
        <div class="col-md-4 text-center">
          <img src="./img/boot.png" />
          <div class="caption">
            <h3>boot</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,
              eos voluptatibus quasi quaerat quas consequuntur dignissimos
              eligendi, doloremque laborum culpa a neque ab, enim sit autem
              harum rem quo sequi.
            </p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 线 -->
    <div class="container liner">
      <hr />
    </div>

    <!-- 标签页 -->
    <div class="container" id="damu-tab">
      <!-- 标签头 -->
      <ul class="nav nav-tabs" role="tablist" id="damu-list">
        <li role="presentation" class="active">
          <a
            href="#babeljs"
            aria-controls="babeljs"
            role="tab"
            data-toggle="tab"
            >babeljs</a
          >
        </li>
        <li role="presentation">
          <a href="#react" aria-controls="react" role="tab" data-toggle="tab"
            >react</a
          >
        </li>
        <li role="presentation">
          <a
            href="#typescript"
            aria-controls="typescript"
            role="tab"
            data-toggle="tab"
            >typescript</a
          >
        </li>
        <li role="presentation">
          <a href="#boot" aria-controls="boot" role="tab" data-toggle="tab"
            >boot</a
          >
        </li>
      </ul>

      <!-- 标签内容 -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="babeljs">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h4>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
                  voluptatem repellendus explicabo, doloribus provident iusto?
                  Recusandae, omnis quisquam. Adipisci reiciendis aliquid
                  temporibus rerum cum officiis iure voluptate, earum accusamus
                  iusto!
                </h4>
              </div>
              <div class="col-md-5">
                <img src="./img/babeljs.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="react">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-5">
                <img src="./img/react.png" alt="" />
              </div>
              <div class="col-md-7">
                <h4>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
                  voluptatem repellendus explicabo, doloribus provident iusto?
                  Recusandae, omnis quisquam. Adipisci reiciendis aliquid
                  temporibus rerum cum officiis iure voluptate, earum accusamus
                  iusto!
                </h4>
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="typescript">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h4>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
                  voluptatem repellendus explicabo, doloribus provident iusto?
                  Recusandae, omnis quisquam. Adipisci reiciendis aliquid
                  temporibus rerum cum officiis iure voluptate, earum accusamus
                  iusto!
                </h4>
              </div>
              <div class="col-md-5">
                <img src="./img/typescript.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="boot">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-5">
                <img src="./img/boot.png" alt="" />
              </div>
              <div class="col-md-7">
                <h4>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
                  voluptatem repellendus explicabo, doloribus provident iusto?
                  Recusandae, omnis quisquam. Adipisci reiciendis aliquid
                  temporibus rerum cum officiis iure voluptate, earum accusamus
                  iusto!
                </h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 版权 -->
    <div class="container">&copy;yang</div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" 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>模态框 &hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </body>
  <!-- <script type="text/javascript" src="./js/jquery-1.12.4.js"></script> -->
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"
  ></script>

  <!-- https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js -->
  <script type="text/javascript" src="./js/bootstrap.js"></script>
  <script>
    // //   可以通过style控制轮播效果，也可以通过js、jQuery控制轮播效果
    //   $(function (){
    //      $('.carousel').carousel({
    //          interval:2000,//控制时间
    //          pause:null,//鼠标放上去是否移动
    //          wrap:false
    //      })

    $("#damu-nav > li > a").click(function (e) {
      var href = $(this).attr("href");
      console.log("a[href=" + href + "]");
      //    使用该方法，jQuery的版本不能太高
      $("a[href=" + href + "]").tab("show");
      $(document).scrollTop($("#damu-tab").offset().top);
      e.preventDefault();
    });
  </script>
</html>
_洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap常用的一些应用示例
09-19
bootstrap常用的一些应用示例,这些示例使用很简单，上手容易，包含了一些bootstrap使用的最多的功能，如：表单美化，弹出层，消息框，页面布局等...
BootStrap的应用
hongcaixia的博客
04-21 541
BootStrap的应用编写商城首页<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge">
BootStrap 基本应用
与你清欢
04-22 302
BootStrap l.引用bootstrap.css 注，使用JQ需要1.11以上比较好 2.加入mate name 的 设备宽高代码全局CSS 布局容器: .container （固定宽度）或 .container-fluid （100% 宽度） 栅格系统：通过row(行),column(列)的方式，自动计算宽高 栅格参数：12列
BootStrap详细应用-小bai前端框架进阶秘籍
wnw1234的博客
03-27 1079
BootStrap是什么? BootStrap是HTML,CSS,JS框架.主要用于开发响应式布局,移动设备优先的WEB项目. 为什么要使用BootStrap? 1.简洁,直观,强悍的前端开发框架,是HTML,CSS,JavaScript工具集 2.基于H5,C3具有友好的学习曲线,卓越的兼容性,响应式设计,12列网格,样式向导文档 3.自定义JQuery插件,完整的类库.BootStrap3基于Less,BootStrap4基于Sass的CSS预处理技术 4.BootStrap响应式布局设计,
bootstrap应用于中介
02-01
bootstrap应用于中介变量分析，详细 阐述 了 中介 效应分析 的 原理 、 程序 ， 以 及使用 方 法的 具体步骤 。
bootstrap应用—浏览器博物馆.zip
09-06
此项目为一个“浏览器博物馆”的响应式布局网页小项目，运用到的技术有“HTML+CSS+JQuery+Bootstrap”，网页美观简洁，适合前端入门学习。
BOOTSTRAP应用
08-17
快速开发 更快速的搭建web服务 提供全局的样式页面，是开发更方便快速，新颖
bootstrap应用案例，手机兼容案例、轮播案例
06-16
bootstrap应用案例，手机兼容案例、轮播案例
移动应用开发bootstrap模板
04-01
移动应用开发bootstrap模板
Bootstrap基本介绍及运用
m0_62839141的博客
03-31 2764
一，Bootstrap是什么? 一，Bootstrap是什么? 1.1Bootstrap诞生于2011年，来自Twitter公司，是目前最受前端框架 1.2是一个用于快速开发Web应用程序和网站的前端框架 1.3Bootstrap是基于HTML，CSS，JS的，简单灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(pc端，平板，手机)上完美展示的响应式前端框架 ...
Web开发：Bootstrap的应用
weixin_34124651的博客
10-16 46
转载于:https://www.cnblogs.com/tengqiuyu/p/7678297.html
bootstrap笔记-bootstrap实际运用
永远的北极光
09-13 1684
这两天一直在看bootstrap，许多教程都着重于介绍boostrap的原理、CSS 概览、组件等，然而对项目中具体怎么使用却没有涉及，对此作为新手的我倍感心累，幸运的是看了一篇博客，瞬间改变了我的处境。不论怎样，都把这篇参考的博客贴在后面，以示感谢！ 一、bootstrap准备工作 1、下载boostrap 地址：http://getbootstrap.com/ 打开页面后，选择
Bootstrap前端框架的整合与应用
最新发布
2302_78109835的博客
10-31 498
下面以一个简单的网站为例，介绍如何使用Bootstrap实现网站的布局和功能。通过使用Bootstrap，我们可以快速实现这些功能，并且保证网站的兼容性和响应式布局。Bootstrap支持的浏览器包括Chrome、Firefox、Safari、Edge等主流浏览器。在当今的互联网开发领域，Bootstrap无疑是前端开发框架中的佼佼者。它以简单、灵活、美观的特点，赢得了广大开发者的喜爱。本文将详细介绍Bootstrap前端框架的整合和应用，帮助大家更好地理解和使用这个强大的工具。
Bootstrap应用基本模板
wibur的博客
06-13 501
Bootstrap应用基本模板
BootStrap的部分运用
yooppa的博客
03-14 703
以下只是 浅浅涉及 个人比较受用 对于搞后端的，了解一点bootStrap能够更好的渲染自己设计的小型界面 再配合后端数据交互 BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。 1、因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上 2、接着导入js和css Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js 接着是 Bootstrap的css，里面定义了各种样式 最后是 Bootstrap的j
Bootstrap引用模板
陈福国的博客
08-01 796
使用步骤： 下载Bootstrap 在项目中 将三个文件复制到根目录下（css,fonts js） 创建HTML页面 引入必要的文件 在body位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--neame="vewport 可视化区...
BootStrap基本使用
热门推荐
m0_60027772的博客
09-18 2万+
html超文本标记语言，多出来的html为超文本标记语言，是一种标识性语言css为层叠样式表css为层叠样式表，为前端三剑客之一
boostrap的简单应用
qq_41603209的博客
03-25 242
Bootstrap的简单介绍 一丶什么是bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一...
Bootstrap 应用的人多吗
03-27
作为一名 AI 语言模型，我无法确切知道有多少人使用 Bootstrap 应用。但是，Bootstrap 是一个广泛使用的前端框架，许多网站和应用程序都使用它来构建响应式、移动友好的界面。因此，可以说 Bootstrap 应用的使用人数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值