Bootstrap初次邂逅——模仿Bootstrap官网上的一个小页面（响应式页面）

最新推荐文章于 2022-10-07 20:15:35 发布

Kong_十六

最新推荐文章于 2022-10-07 20:15:35 发布

阅读量1k

点赞数

分类专栏： Bootstrap前端框架文章标签： bootstrap html css

本文链接：https://blog.csdn.net/qq_42383764/article/details/104283045

版权

Bootstrap前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Bootstrap是一个前端UI框架，最近也是刚接触不久，也没有看很多东西，主要是了解了一下它里面的栅格系统和响应式布局。

虽然我是个前端小菜鸟吧，但是还不是很笨的，就是看看Bootstrap官网上的文档，上面有很多实例，尝试着按照文档上面说的去练练，看看效果是什么样。

遇到不懂的就看看文档，上CSDN博客、知乎、掘金、segmentfault思否这些网站，一般都可以找到答案，再不懂的话就仔细看看读读官方文档。

今天主要是把我用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,">
    <title>Bootstrap Template</title>
    <!-- 引入Bootstrap中的全局样式表 -->
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .ting-hovera a{
        color: gray;
      }
      .ting-hovera a:hover {
        text-decoration: none;
        color: rgb(71, 71, 71);
      }
      .ting-hovera h3 > a:link,.ting-hovera h3 > a:visited{
        color: #3677b1;
      }
      .ting-hovera h3 > a:visited{
        text-decoration: none;
      }
      .ting-hovera h3 > a:hover,.ting-hovera h3 > a:focus{
        color: #25547e;
      }

    .top_bg{
      background-color: #6f5499;
    }
    .top_bg > h1{
      font-weight: bolder;
      font-size: 100px;
      color: rgba(255, 255, 255, .5);
    }
    .top_bg p{
      color: black;
    }
    </style>

    <!--[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>
    <!-- 头部 -->
    <div class="container ">
      <div class="jumbotron text-center top_bg">
        <h1>Bootstrap</h1>
        <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。        </p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">下载Bootstrap</a></p>
      </div>
    </div>
    
    <div class="container">
      <!-- 第一行 -->
      <div class="row ting-hovera">
        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/webpack.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">Webpack</a></h3>
              <a href="#">是前端资源模块化管理和打包工具</a>
              <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/react.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">React</a></h3>
              <a href="#">用户构建用户界面的JavaScript框架</a>
              <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/typescript.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">TypeScript</a></h3>
              <a href="#">中文手册</a>
              <p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/svelte.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">Svelte</a></h3>
              <a href="#">中文网</a>
              <p>Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/jqueryapi.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">JqueryAPI</a></h3>
              <a href="#">中文手册</a>
              <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/nextjs.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">NEXTjs</a></h3>
              <a href="#">中文文档</a>
              <p>Next.js 是一个轻量级的 React 服务端渲染应用框架。</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/expo.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">TypeScript</a></h3>
              <a href="#">中文手册</a>
              <p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail" style="height: 337px;">
            <img src="img/vuejs.png" alt="...">
            <div class="caption text-center">
              <h3><a href="#">vuejs</a></h3>
              <a href="#">中文文档</a>
              <p>Vue.js - 是一套构建用户界面的渐进式框架。avaScript 代码，并像做外科手术一样细粒度地更新 DOM。</p>
            </div>
          </div>
        </div>
      </div> 

      
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script> -->

     <!-- 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>
  </body>
</html>

大屏下(PC端):