BootStrap案例

最新推荐文章于 2024-01-02 17:45:28 发布
最新推荐文章于 2024-01-02 17:45:28 发布
阅读量518 收藏
点赞数
分类专栏： Django 网站开发 文章标签： bootstrap django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_jiaye/article/details/130044675
版权

BootStrap是已经写好的css样式
（1）下载BootStrap
在这里插入图片描述
解压后放在 static文件夹–>plugins(存放插件)–>bootstrap-3.4.1
在这里插入图片描述

（2）·使用

在页面上引入BootStrap
编写HTML时，按照BootStrap的规定来编写+自定制

开发版本(一般做网站使用这个)

<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"

生产版本

<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"

一、初识

按钮样式案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
    <input type="button" value="提交">

    <input type="button" value="提交" class="btn btn-primary">
    <input type="button" value="提交" class="btn btn-success">
    <input type="button" value="提交" class="btn btn-danger">
    <input type="button" value="提交" class="btn btn-danger btn-xs">
</body>
</html>

在这里插入图片描述

二、导航

导航栏代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例：后台管理

1.布局：
（1）container-fluid 平铺
（2）container 不平铺
2.响应式布局
3.表格样式：
（1）table-striped 条纹
（2）table-hover 悬浮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <!-- container-fluid  平铺-->
    <!-- container  不平铺-->
    <div class="container-fluid">
        <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="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">教育数据可视化平台</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div>
            <input type="button" value="新 建" class="btn btn-primary">
        </div>

        <div style="margin-top: 20px">
            <!-- table-striped 条纹 -->
            <!-- table-hover 悬浮 -->
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</nav>
</body>
</html>

在这里插入图片描述

案例：后台管理+面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <!-- container-fluid  平铺-->
    <!-- container  不平铺-->
    <div class="container-fluid">
        <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="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">教育数据可视化平台</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">表单区域</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword3">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-success">保 存</button>
                </form>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">数据列表</div>
            <!--
            <div class="panel-body">
                注意：以下是我们经过筛选出来的重要数据。
            </div>
            -->
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>
                        <a class="btn btn-primary btn-xs">编辑</a>
                        <a class="btn btn-danger btn-xs">删除</a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>
                        <a class="btn btn-primary btn-xs">编辑</a>
                        <a class="btn btn-danger btn-xs">删除</a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>
                        <a class="btn btn-primary btn-xs">编辑</a>
                        <a class="btn btn-danger btn-xs">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <ul class="pagination">
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
        </ul>
    </div>
</nav>
</body>
</html>

在这里插入图片描述

图标

1.在bootstrap里面提供的小图标，不多。

在这里插入图片描述

2.使用fontawesome组件

font awesome组件下载

（1）下载
在这里插入图片描述

解压后放在 static文件夹–>plugins(存放插件)–>font-awesome-4.7.0
（2）引入

<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">

（3）使用
在这里插入图片描述

页面展示
在这里插入图片描述

shi_jiaye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
3.BootStrap基础
qq_41891186的博客
05-08 443
是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap： 下载BootStrap 使用 在页面上引入BootStrap 编写HTML时，按照BootStrap的规定来编写 + 自定制。 3.1 初识 https://v3.bootcss.com/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
BootStrap
LittleBoyss的博客
08-08 452
Bootstrap 是一套现成的 CSS 样式集合 HTML、CSS 和 JS 框架，用于开发响应式布局、 移动设备优先的 WEB 项目 布局容器 1、.container 类用于固定宽度并支持响应式布局的容器。 … 2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 … 栅格网格系统 网格系统必须使用到 css container、row...
bootstrap案例35个常用案例
01-15
收集了35个实用的bootstrap案例，轮播，表单设计等
bootstrap框架实例大全
10-16
包含bootstrap完整的组件参考实例,让你的网页开发更快速!
Bootstrap3从基础到案例实战，完美实现响应式网站案例
02-06
Bootstrap介绍和Bootstrap各个版本之间的差异对比。通过Bootstrap3这一稳定版本对Bootstrap的基本起步、全局css样式、组件以及相关的插件进行介绍。重点讲解栅格布局这一核心内容对实现响应式布局的支持，配合其他全局样式和组件及插件，让用户在实现响应式布局的同时，得到更加优雅的页面效果。
【前端开发】bootstrap框架综合案例（2）
`雾博客
06-17 554
<!DOCTYPE html> <html> <head> <title>Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.mi
[硬核] Bootstrap Blazor Table 综合演示例子
alex_zoucn的博客
01-15 2199
1.导入导出 2.分页功能 3.增删改查 4.批量删除 5.批量编辑(审核) 6.列排序与列搜索 7.顶部搜索实现所有列搜索 8.高级搜索实现多条件搜索 9.顶部与刷新与视图列 10.实现文本类型明细行 11.列的统计 12.隐藏列,时间日期列格式化 13.新窗口打开 14.随机数据 15.自由编辑 16.清空数据 17.模板下载
【前端开发】bootstrap框架综合案例（1）
`雾博客
06-17 906
<!DOCTYPE html> <html> <head> <title>callio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="tex
bootstrap案例
01-18
Bootstrap是世界上最流行的前端开发框架，由Twitter开发，用于构建...通过深入研究这个"bootstrap案例"，开发者不仅可以掌握Bootstrap的基本用法，还能了解到如何将其应用于实际项目中，从而提升网页设计和开发的效率。
全网超神bootstrap综合实战含源码
03-03
全网火爆的bootstrap综合实战，包含前台和后台项目，写代码，不枯燥！
BootStrap案例.zip
03-31
鄙人花了一个月的时间才完成了这个网站，这个网站采用HTML、CSS、JavaScript、jQuery、以及BootStrap框架技术完成的，由于我是采用了BootStrap框架技术所以该网站能适应一切设备下不同分辨率的屏幕下进行浏览，由于...
前端-css
m0_58250910的博客
11-14 397
css
eclipse 开发web项目 引入bootstrap的路径问题
xfjjs_net的博客
01-15 3371
1.下载bootstrap，把bootstrap文件夹放在WebContent下时： 路径：&lt;link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt; 2.把bootstrap文件夹放到WEB-INF下面时： 路径：&lt;link href="bootstrap/css/bootstrap.min.css"...
Web基础(从零开始)——Bootstrap使用方法（文档下载、引入及使用）
qq_57633498的博客
11-25 1485
Bootstrap基于HTML、CSS和JS，使得Web开发更加快捷。 中文网站：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐使用： Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布
Bootstrap响应式 风景主题网页设计 HTML CSS适配PC 手机端
最新发布
lxidw7的博客
01-02 864
Bootstrap4响应式网页设计，本套大作业共计12个页面，均为响应式页面，使用bootstrap4制作导航栏、轮播图，使用@media screen and (min-width:480px){... 、 798px、1024px来控制移动端、平板端、PC端对应的响应式尺寸，整体美观度较高，网页中包含：Div+CSS、首页JS轮播图、视频、表单、鼠标滑过效果、二级页面、三级页面，LOGO设计~Bootstrap响应式 风景主题网页设计 HTML CSS适配PC 手机端。
【实战】教你如何使用 Bootstrap 搭建一个企业网站——《Bootstrap实战》
程序边界
04-14 2939
文章目录一、准备启动文件1.完成之前的效果：2.完成之后的效果3.文件清单4.本章目标二、页头区1.需要完成的效果特性：2.将Logo放在导航条上方3.调整导航条三、添加实用导航1.要实现的效果2.添加代码和样式四、调整响应式导航五、调整配色六、调整折叠后的导航条配色1.调整响应式导航条2.调整水平导航条七、设计复杂的响应式布局1.调整中、宽布局2.调整标题、字体大小和按钮3.增大主栏4.调整第三...
Bootstrap部分案例
m0_61148761的博客
04-03 2792
主要用于组件：媒体对象-Media object代码如下效果如下主要用于页面内容：表格-Table代码如下效果如下主要用于组件：模态框-Modal代码如下效果如下：（点击结算弹出）扩展内容-图标代码如下效果如下折叠 滚动监听 下拉菜单 分页导航-面包屑导航 等等（需要留下印象）页面中引入库 ① bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
Bootstrap-案例
qq_60478234的博客
04-03 1369
这次的内容主要是以Bootstrap案例来讲解。 案例1：实现搜索书籍页面 实现搜索书籍页面的效果及代码展示： 1.在Bootstrap中使用的组件：媒体对象-Media object 2.效果图： 3.代码： <div class="col-9"> <!-- 右9 --> <div class="media"> <img src="./img/img/1.png" class="mr-3" alt="..."&.

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shi_jiaye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值