BootStrap框架——制作BootStrap中文网首页

最新推荐文章于 2023-04-19 21:02:32 发布

weixin_30756499

最新推荐文章于 2023-04-19 21:02:32 发布

阅读量785

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/Tracey-1023/p/7618324.html

版权

本文通过模仿制作Bootstrap官网首页，介绍了Bootstrap框架的核心——栅格系统，详细讲解了如何利用栅格系统创建响应式布局，包括引入框架文件、搭建导航栏、使用栅格系统布局内容，以及设置响应式行为。旨在帮助读者理解和应用Bootstrap进行网页开发。

摘要由CSDN通过智能技术生成

小女感觉自己好久没有好好写博客了，蹲在墙角反思中...

今天通过一个实例给大家介绍一款实用又好用的框架——Bootstrap框架！

什么是Bootstrap呢？

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

而，Bootstrap框架的栅格系统是其响应式布局的核心内容。

今天，小女要通过模仿制作Bootstrap官网首页，为大家介绍一下其框架的基本运用，希望会对大家有帮助！

官网原版展示

响应式展示

首先，引入Bootstrap框架的css、js文件

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/BootStrap中文文档.css" />
<!--自己创建的css文件，需要覆盖Bootstrap原有的css，置于其后。-->
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>    
<!--JQuery js文件-->
<script src="js/bootstrap.js" type="text/javascript"></script>

接下来，搭建顶部导航栏，由于Bootstrap给我们提供了现成的导航栏框架，我们只需要在标签中引入相应的class就可以了！

<nav class="navbar navbar-default">      <!--导航栏标签-->
      <div class="container">
          <!--将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。-->
        <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="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>      
          <a class="navbar-brand" href="#">Bootstrap</a>
        </div>
    
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">