前端开发-4 BoodStrap

最新推荐文章于 2023-12-18 16:16:11 发布

Ustinian๑҉

最新推荐文章于 2023-12-18 16:16:11 发布

阅读量151

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/weixin_48506870/article/details/117935224

版权

基本结构

Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框

表格内容

<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结。

轮播（Carousel）插件
一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
导航栏

创建一个默认的导航栏的步骤如下：

向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

个人介绍页面展示
代码：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>个人简介</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
        #bg {
            background-image: url("images/head.jpg");
            background-size: cover;
        }
 
        #end {
            font-size: 18px;
            text-align: center;
 
            background-color: darkgray;
        }
    </style>
</head>
 
<body>
    <div id="bg" class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1>Hello！</h1>
        </div>
    </div>
 
    <div class="container">
        <h2 class="text-primary">图片展示</h2>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <img src="images/3.jpg" class="rounded img-fluid">
            </div>
            <div class="col-md-4">
                <img src="images/5.jpg" class="rounded-circle img-fluid">
            </div>
            <div class="col-md-4">
                <img src="images/4.jpg" class="rounded img-fluid">
            </div>
        </div>
    </div>
    <br><br>
    <div class="container">
        <h2 class="text-primary">基本信息</h2>
        <hr>
        <div class="col-md-9">
            <ul class="list-group">
                <li class="list-group-item">姓名：    </li>
                <li class="list-group-item">星座：白羊座</li>
                <li class="list-group-item">爱好：看电视剧</li>
                <li class="list-group-item">专业：计算机</li>
            </ul>
        </div>
    </div>
    <br><br>
 
    <div class="container">
        <h2 class="text-primary">课程表</h2>
        <hr>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
        
        </table>
 
    </div>
    <br>
 
    <div class="container mt-3">
        <h2 class="text-primary">学习园地</h2>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <h4 class="text-secondary">
                    专业课程
                </h4>
                <ul class="list-group">
                    <li class="list-group-item">数据结构</li>
                    <li class="list-group-item">JAVA程序设计</li>
                    <li class="list-group-item">Web技术</li>
                    <li class="list-group-item">数据库系统管理</li>
                    <li class="list-group-item">软件工程</li>
 
                </ul>
            </div>
            <div class="col-md-4">
                <h4 class="text-secondary">
                    喜欢阅读的书
                </h4>
                <ul class="list-group">
                    <li class="list-group-item">活着</li>
                    <li class="list-group-item">白夜行</li>
                    <li class="list-group-item">小王子</li>
                    <li class="list-group-item">人性的弱点</li>
                    <li class="list-group-item">偷影子的人</li>
                </ul>
            </div>
            <div class="col-md-4">
                <h4 class="text-secondary">
                    推荐的文章
                </h4>
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">中国大学MOOC</a></li>
                    <li class="list-group-item"><a href="#">牛客网</a></li>
                    <li class="list-group-item"><a href="#">58同城</a></li>
                    <li class="list-group-item"><a href="#">人民日报</a></li>
                    <li class="list-group-item"><a href="#">去哪儿</a></li>
                </ul>
            </div>
        </div>
    </div>
 
    <br /><br />
 
 
    <div class="container mt-3">
        <h2 class="text-primary">我的大学</h2>
        <hr>
        <div class="row">
            <div class="col-md-9">
                <div id="myCarousel" class="carousel slide" data-ride="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>
             
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="images\校园3.jpg" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img src="images\校园2.jpg" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img src="images\校园1.jpg" alt="Third slide">
                        </div>
                        <div class="carousel-item">
                            <img src="images\校园4.jpg" 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-3">
                <h2 class="text-secondary">
                    学校简介
                </h2>
                <p style="text-indent:2em">
                    北京大学
                </p>
            </div>
        </div>
    </div>
    <br>
 
    <footer id="end" class="mt-3 p-3">
        <p class="text-white">联系我：   <a href="interface.html">返回首页</a></p>
 
    </footer>
</body>
 
</html>

-效果展示
在这里插入图片描述

Ustinian๑҉

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发-4 BoodStrap

基本结构Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框表格内容<table> 为表格添加基础样式。<thead> 表格标题行的容器元素（<tr>），用来标识表格列。<tbody> 表格主体中的表格行的容器元素（<tr>）。<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。&lt
复制链接

扫一扫