Bootstrap4的简单运用

最新推荐文章于 2022-04-20 19:19:10 发布
最新推荐文章于 2022-04-20 19:19:10 发布
阅读量231 收藏
点赞数 2
分类专栏： BootStrap 文章标签： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_cmy/article/details/101514666
版权

昨天了解了一下Bootstrap4的一些操作，东西很多，这里就用了一些。直接看例子吧。

<!DOCTYPE html>
<html >

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人主页</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style>
        #t1 {
            background-image: url("image/b1.jpg");
        }

        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body  id="t1" >
    <div class="container">
        <h2 class="text-center">个人简介</h2>
        <hr>
        <div class="row">
            <div class="col-md-3">
                <img src="image/xing.jpg" class="rounded-circle img-fluid">
            </div>
            <div class="col-md-9">
                <table class="table table-bordered">
                    <thead>
                        <tr class="text-center">
                            <td>姓名：张艺兴</td>
                        </tr>
                        <tr class="text-center">
                            <td>星座：天蝎</td>
                        </tr>
                        <tr class="text-center">
                            <td>爱好：唱歌跳舞</td>
                        </tr>
                        <tr class="text-center">
                            <td>地址：长沙</td>
                        </tr>
                        <tr class="text-center">
                            <td>专业：唱歌</td>
                        </tr>
                        <tr class="text-center">
                            <td>发展方向：走向世界</td>
                        </tr>
                        <tr class="text-center">
                            <td>人生格言：努力努力再努力</td>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="container">
        <h2 class="text-center">日期安排</h2>
        <hr>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1-2节</td>
                    <td>唱歌</td>
                    <td>跳舞</td>
                    <td>跳舞</td>
                    <td>表演</td>
                    <td>表演</td>
                </tr>
                <tr>
                    <td>3-4节</td>
                    <td>唱歌</td>
                    <td>唱歌</td>
                    <td>唱歌</td>
                    <td>跳舞</td>
                    <td>跳舞</td>
                </tr>
                <tr>
                    <td>5-6节</td>
                    <td>表演</td>
                    <td>表演</td>
                    <td>音乐</td>
                    <td>音乐</td>
                    <td>跳舞</td>
                </tr>
            </tbody>
        </table>
    </div>
   
    <div class="container mt-3">
        <h2  class="text-center">主要作品</h2>
        <hr>
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <div class="card">
                    <img class="card-img-top" src="image\zuo4.jpg" alt="通用的占位符缩略图">
                    <div class="card-body">
                        <p class="card-text">一个人</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="card">
                    <img class="card-img-top" src="image\zuo2.jpg" alt="通用的占位符缩略图">
                    <div class="card-body">
                        <p class="card-text">祈愿</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="card">
                    <img class="card-img-top" src="image\zuo3.jpg" alt="通用的占位符缩略图">
                    <div class="card-body">
                        <p class="card-text">sheep</p>
                    </div>

                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="image\zuo4.jpg" alt="通用的占位符缩略图">
                        <div class="card-body">
                            <p class="card-text">一个人</p>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <div class="container mt-3">
        <h2  class="text-center">我的写真</h2>
        <hr>
        <div class="row">
            <div class="col-md-7">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- 轮播（Carousel）指标 -->
                    <ul class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                    </ul>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="image\xie1.jfif" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img src="image\xie2.jfif" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img src="image\xie3.jfif" alt="Third slide">
                        </div>
                        <div class="carousel-item">
                            <img src="image\xie4.jfif" alt="forth slide">
                        </div>
                    </div>
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>

            <div class="col-md-5">
                <h2 class="panel-title">
                    个人介绍
                </h2>
                <p style="text-indent:2em">
                   2018年1月，与汤唯、朱亚文合作主演古装宫廷剧《大明皇妃孙若微传》，
                   并在剧中饰演一生跌宕起伏、两次登基帝位的明英宗朱祁镇 [60]  ；
                   19日，以全民制作人代表的身份加盟偶像男团竞演养成类真人秀《偶像练习生》 [61]  
                   。2月15日，2018年中央电视台春节联欢晚会，张艺兴与黄渤、陈伟霆表演歌曲《最好的舞台》；
                    [62]  3月30日，以信使的身份参加央视一套人文艺术类节目《信·中国》 [63]  ；3月26日，
                    第25届东方风云榜音乐盛典获得“年度最佳专辑”、“年度最佳制作人”、“年度最受欢迎男歌手”，
                    并在现场演唱歌曲串烧《I NEED U》+《CAN YOU FEEL ME》 [64]  ；4月30日，央视五四晚会录制，
                    张艺兴荣获2018年度“五月的鲜花”优秀青年演员称号 [65]  ；同月，参演由黄渤执导的电影《一出好戏》
                     [66]  ；5月，献唱“五四青年节”特别歌曲《强国一代有我在》，并参演MV [67]  ；10月，
                     张艺兴携新专辑《梦不落雨林/NAMANANA》亮相湖南卫视《天天向上》。
                </p>
            </div>
        </div>
    </div>

</body>

</html>

运行效果：

 

 

百度网盘资源：https://pan.baidu.com/s/1zCOx4qjSUylxHkrmjhcJpA

提取码：ylx8

 

 

 

hello_cmy
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap4（三）工具类-公共样式
weixin_45650998的博客
09-02 265
公共样式
BootStrap 4种图片形式 image形式 img-rounded img-circle img-thumbnail img-responsive
tanzongbiao的专栏
11-18 731
img-rounded img-circle img-thumbnail img-responsive <img id="img" class="img-rounded" height="150px" src="">
bootstrap4 调整元素之间距离
热门推荐
王建野的专栏
03-06 6万+
    影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。一、影响距离大小的值有0,1,2,3,4,5,auto(1)、marg...
bootstrap4 使用及常用样式详细整理 (依照官网翻译)
Altaba的博客
08-01 1万+
&amp;nbsp; bootstrap4常用样式整理 简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插...
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
旺仔好吃糖的博客
11-20 1299
Bootstrap4 网络系统：屏幕最多分为12列 创建一行(<div class=“row”)。然后， 添加需要的列( .col-- 类中设置)。 第一个星号 () 表示响应的设备: sm, md, lg 或 xl, 第二个星号 () 表示一个数字, 同一行的数字相加为 12 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25%
23.3 Bootstrap 框架4
最新发布
10-05
本章将详细探讨Bootstrap 4的主要特点、核心概念以及如何在实际项目中运用。 1. **响应式设计**：Bootstrap 4内置了媒体查询，支持多种设备屏幕尺寸，如手机、平板、桌面等。通过栅格系统（Grid System）实现布局的...
simple:用bootstrap4制作的简单登录页面
04-16
这个"simple:用bootstrap4制作的简单登录页面"项目是利用Bootstrap 4 的组件和网格系统来创建一个简洁、高效的登录界面。下面将详细介绍如何使用Bootstrap 4 创建登录页面以及涉及到的相关知识点。 1. **Bootstrap ...
Bootstrap table表格简单操作
08-31
4. **引入Bootstrap资源** 在HTML页面中，需要引入Bootstrap的CSS和JavaScript文件，以应用其样式和功能。通常，这包括： - jQuery库，因为Bootstrap的一些组件依赖于jQuery：`<script src="../Bootstrap/jquery-...
candra:用Bootstrap 4制作的简单网站
05-01
【标题解析】：“candra:用Bootstrap 4制作的简单网站”表明这是一个使用Bootstrap 4框架构建的简单网站项目，命名为“candra”。Bootstrap 4是目前广泛使用的前端开发框架，它提供了丰富的预设样式、组件和...
Bootstrap4响应式登录注册界面模板
12-30
Bootstrap4是一款广泛使用的前端开发框架，它以简洁、灵活和响应式的设计著称，使得开发者可以快速构建美观且适应各种设备的网页应用。本资源提供的是一个基于Bootstrap4的响应式登录注册界面模板，适用于初学者进行...
BootStrap框架模块：BootStrap4基础
LiLi的博客
01-14 4814
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。 利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB 站点。 BootStrap中文官网 第一章 BootStrap4基础 下载 Bootstr
bootstrap4 创建一个简单页面
biu的博客
03-29 5334
第一次尝试用前端框架写了一个简单页面。最重要的应该是先好好读一遍使用文档啊啊。先贴一波官方链接：http://www.bootcss.com/可以少走很多弯路_(:з」∠)_ 另外模板这个东西新手们打开看看也可以学到很多https://v4.bootcss.com/docs/4.0/examples/先贴一个预览图：页脚还有一点内容以下是html中的内容&lt;!DOCTYPE html&gt; ...
react hooks使用_使用React Hooks和Context API构建CRUD应用
08-16 248
react hooks使用This article will be covering React hooks, introduced in version 16.8 and the Context API, introduced in 16.3 and mixing them together to build a fully functional CRUD application. Here w...
Bootstrap手册中的布局说明
Mr、黄
07-07 209
开发工具与关键技术：MVC JQ 作者：Mr、黄 撰写时间:2021/7/8 Bootstrap手册中布局的概述： Bootstrap包含了一些供项目使用的组件和选项 包括包裹容器、强大的网络系统、灵活多变的媒体 对象和响应式的工具类 Container容器 Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在 .container或.container-fulid容器之中-- 这是启用整个栅格系统必不可少的前置条件 它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式.
bootstrap4 新特性
齐枫的博客
02-04 3615
转载自http://geek.csdn.net/news/detail/38027 从Less迁移到Sass： 现在，Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快； 改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。 支持选择弹性盒模型（flexbox）：这是项划时代的功能——只要修改一个Boolean变量，就可以利用flex
Bootstrap4之弹性盒子详解（flexbox）
吉帅振博客
06-21 1万+
个人认为：弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分，接下来，我就根据自己的理解详细讲述一下对于弹性盒子的看法。1.排序方式2.响应式布局...
Bootstrap之占位符
qq_44703604的博客
04-20 849
一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_https_context = ssl._cre
BootStrap教程
08-29
由于 BootStrap 的设计理念简单易用，所以本教程也采用了通俗易懂的语言，生动形象的示例，结合实际的操作步骤，使得读者能够很快地掌握 BootStrap 的使用方法，对于一些比较难以理解的概念，还提供了详细的图解和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值