[Bootstrap]Bootstrap实战:制作简单博客

最新推荐文章于 2024-06-27 19:30:00 发布
最新推荐文章于 2024-06-27 19:30:00 发布
阅读量770 收藏 2
点赞数 2
分类专栏： Bootstrap Full Stack Developer 文章标签： bootstrap blog
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013716535/article/details/105970650
版权

目录

背景

上一节，我们讲了3分钟入门Bootstrap，这一节实战Bootstrap制作简单博客，是个简单的，有菜单，轮播图，博客列表，和尾部的博客。

示意图

在这里插入图片描述

代码

目录结构

在这里插入图片描述

搭建html body框架

    <!--菜单栏 -->
    <div class="header"></div>
    <!--轮播图 -->
    <div class="carouselmy"></div>
    <!--内容列表 -->
    <div class="content"></div>
    <!--尾部 -->
    <div class="footer"></div>

使用Bootstrap框架填充内容

  1. head里面引入bootstrap

     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <title>Pink</title>

  2. body里面引入js

       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

  3. 菜单栏

    <div class="header">
    <div class="pos-f-t">
        <div class="collapse" id="navbarToggleExternalContent">
            <div class="bg-dark p-4">
                <h5 class="text-white h4">Collapsed content</h5>
                <span class="text-muted">Toggleable via the navbar brand.</span>
            </div>
        </div>
        <nav class="navbar navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </nav>
    </div>
</div>

  4. 轮播图

    <div class="card" style="width: 18rem;">
                    <img src="..." class="card-img-top" alt="...">
                    <div class="card-body">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                    </div>
                </div>

  5. 内容列表

     <div class="container content mt-3 ">
    <div class="row mt-3">
        <div class="card m-auto" style="width: 21.5rem;">
            <img src="images/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk
                    of the card's content.</p>
                <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
            </div>

  6. 尾部

    <div class="footer">
        <div class="card">
            <div class="card-header">
                Featured
            </div>
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
   </div>
  </div>
</div>

优化修改

  1. 菜单加个container，背景色黑色

    <div class="header bg-dark">
 <nav class=" container navbar navbar-dark bg-dark">

  2. 轮播图上面套一个container，上边距4

    <div class="container mt-4">

  3. 添加图片

    <img src="images/1.jpg" class="d-block w-100" alt="...">

  4. 内容列表上面套一个container

    <div class="container content mt-3 ">

  5. 修改footer

    <div class="footer">
        <div class="container mb-5">
            <div class="row">
                <div class="col-8 pt-5">
                    <h3 class="card-title">Special title treatment</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="col-4  pt-5 text-right">
                    <a href="#" class="text-primary">Back to top</a>
                </div>
            </div>
        </div>
    </div>

  6. 全部代码

    	
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>demo3</title>
</head>

<body>
    <!--菜单栏 -->

    <div class="header bg-dark">
        <div class="pos-f-t">
            <div class="collapse" id="navbarToggleExternalContent">
                <div class="bg-dark p-4">
                    <h5 class="text-white h4">Collapsed content</h5>
                    <span class="text-muted">Toggleable via the navbar brand.</span>
                </div>
            </div>
            <nav class=" container navbar navbar-dark bg-dark">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </nav>
        </div>
    </div>
    <div class="container mt-4">
        <!--轮播图 -->
        <div class="carouselmy">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="images/1.jpg" class="d-block w-100" alt="..." style="height:50vh;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>First slide label</h5>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/2.jpg" class="d-block w-100" alt="..." style="height:50vh;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Second slide label</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/3.jpg" class="d-block w-100" alt="..." style="height:50vh;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Third slide label</h5>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
    <!--内容列表 -->
    <div class="container content mt-3 ">
        <div class="row mt-3">
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>

            </div>
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>

            </div>
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>

            </div>
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>

            </div>
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>

            </div>
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>

            </div>
            <div class="card m-auto" style="width: 21.5rem;">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk
                        of the card's content.</p>
                    <button type="button" class="btn btn-outline-dark" style="float:right">View</button>
                </div>
            </div>
        </div>
    </div>
    <hr>
    </hr>
    <!--尾部 -->
    <div class="footer">
        <div class="container mb-5">
            <div class="row">
                <div class="col-8 pt-5">
                    <h3 class="card-title">Special title treatment</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="col-4  pt-5 text-right">
                    <a href="#" class="text-primary">Back to top</a>
                </div>
            </div>



        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>
	```

本节代码地址

Bootstrap使用心得总结（默认会html+css）

  • 如果是自己写设计页面，那就先把框架搭好，然后用bootstrap填充各个部分
    这个部分代码，比如下拉菜单，按钮，面包屑，分页，进度条，这些官网都有，直接拷贝官网代码拿来用就行

  • 如果不需要自己设计，那就直接拿主题模板用就好，boostrap提供了很多免费好看的主题模板，还有收费的模板

  • 学习bootstrap框架，把官网大致浏览一遍，Grid和flex一定要动手练习。你需要知道它有哪些模块，哪些样式，然后写html的时候上官网搜索直接拿来用即可。

螺丝钉tina
关注
专栏目录
如何用bootstrap制作一个属于你自己的博客
ffxw0720的博客吖~
04-07 1942
引子 哟大家好啊，我是非凡小王 前段时间我发了个blink，就是说我做了一个网站然后赚到q了，很多人也想知道怎么做 刚好有个人委托我帮他做一做博客 所以大家就跟着我的脚步从0开始做一个博客吧！！！ 方案 因为直接写的话做出来的肯定不好看 所有都自己写的话十分耗时 所以我们就使用一个名叫bootstrap的框架吧 这个框架也是很多人用的一个框架，是十分好看的 并且支持响应式布局 通俗点来说就是手机...
java 搭建论坛_GitHub - NieShaoLiang/bbs: 基于spring boot的java论坛系统
weixin_42576410的博客
02-16 557
JavaBBS社区简介1、JavaBBS是一款使用Java编写的简易社区系统。2、采用前后端分离的机制实现。前台项目通过http访问RESTFulAPI获取信息渲染页面。3、项目技术分层明显,模块分离，采用springboot构建模块。4、前台页面来自FlyUI的开源社区模板5、实现了异常/常用数据库/控制器 代码复用6、使用了DTO层封装数据，保证数据形式的一致运行环境JDK 8MavenMyS...
基于MVC+Bootstrap的个人博客系统
02-25
基于MVC+Bootstrap的个人博客系统，供大家一起共同分享学习。
用bootstrap框架做一个简单粗糙的博客
OrdnAry的博客
08-11 267
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/boot
用bootstrap框架做的一个博客首页
qinsangdilvzhi的博客
03-12 4175
@TOC 分为head body foot三个部分，其中head分上下两块，body分左右两块，foot分上下两块。 index.html &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name
Bootstrap CSS组件实战：导航与交互设计
1. **下拉菜单组件**：本章教学如何制作下拉菜单，Bootstrap的Dropdown功能允许创建上下文菜单或可展开的菜单。学习者将学会如何使用`.dropdown`和`.dropdown-menu`类来创建动态菜单，通过`data-toggle="dropdown"`...
Bootstrap JavaScript插件实战：模态框、选项卡与轮播图
“JavaScript插件.pptx”主要涵盖了Bootstrap框架中的JavaScript插件使用，包括模态框、选项卡、轮播图和滚动监听插件，适合前端开发学习者，特别是北大青鸟课工场的学生预习和复习。文件内容提供了具体的实例，如...
全网超神bootstrap综合实战含源码
03-03
本资源“全网超神bootstrap综合实战含源码”提供了全面的Bootstrap实战教程，帮助开发者掌握如何利用Bootstrap创建功能丰富的网页和后台管理界面。 在描述中提到，“全网火爆的bootstrap综合实战，包含前台和后台...
Bootstrap响应式布局实战：从入门到登录界面
课程包括六个经典案例，涵盖了窄屏模式网页、固定布局模式、登录界面、流动布局、营销类页面设计以及网页顶部与底部粘贴效果和博客页面的制作。 1. **旋转图标**：虽然原文件中没有直接提及旋转图标，但提到的"fa-...
疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战
03-28
《疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战》是一本深入浅出的前端开发教程，它涵盖了三个核心的前端技术：jQuery、AngularJS和Bootstrap。这些技术在现代网页开发中扮演着至关重要的角色，使得...
bootstrap个人博客网站模板
04-02
bootstrap个人博客网站模板
Bootstrap-Blog：一般的Bootstrap博客，以备将来使用
02-14
这是基于Bootstrap的博客的通用模板 Tailor by modifying fields in blog_data.json in ./statc/blog_content 修订（1/31/2021） 该网站现在使用docker在平台之间移植。 从docker的存储库中实现mongo卷。 安装docker。 从Bootstrap-blog目录运行开发人员模式： docker-compose -f docker-compose.yml up --build 运行生产模式在分离模式下使用pm2： docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build --detach 要停止运行构建： docker-compose down 要清理停顿的作业：
经典的Bootstrap个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
Bootstrap程序员个人博客模板 响应式HTML模板 整套模板
01-03
Bootstrap程序员个人技术博客响应式模板基于Bootstrap3.3.5制作，界面简洁，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、前端技术、后端程序、标签云、读者墙、友情链接、404错误页等网站模板页面。
使用bootstrap框架做一个Aotm Blog个人博客
最新发布
ArrayAda的博客
06-27 372
使用bootstrap框架做一个Aotm Blog个人博客，展示一些自己的个人信息，有四个博客分类：心情记录、学习笔记、旅行相册、美食打卡。
基于bootstrap_博客页面
weixin_30393907的博客
03-04 197
<!DOCTYPE html> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; c...
用bootstrap十分钟搭建你的博客首页
weixin_30466421的博客
12-14 652
第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件 <!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"&gt...
一套不错的基于Bootstrap的博客系统静态页面
weixin_34198797的博客
02-27 933
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap 实战之响应式个人博客 （一）
qq_40329976的博客
05-03 6850
一、示例 1、主页 2、博客详情页 3、在线地址 在线地址：入口 Addition：这里使用github-page将自己的静态项目免费部署到线上。 如果你只是做一些简单的静态项目做展示，付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的。github提供了github-page让用户可以免费部署自己的静态站点。更多参考：github-page 在本项目的静态站点部署时与其他的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值