第二百五十四节，Bootstrap项目实战--案例

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量145 收藏
点赞数
文章标签： javascript ViewUI

Bootstrap项目实战--案例

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>Bootstrap 介绍</title>
    <!--引入bootstrap样式文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/ceshi.css">
    <link rel="stylesheet" href="css/anl.css">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">                <!--声明导航区域，设置导航默认样式，设置导航条固定在顶部-->
    <div class="container">                                            <!--设置固定布局，最大宽度1140-->
        <div class="navbar-header">                                    <!--设置导航标题区域-->
            <a href="#" class="navbar-brand logo">自贡瑞佳财务咨询有限公司</a>    <!--设置导航标内容-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">    <!--设置导航按钮-->
                <span class="icon-bar"></span>        <!--设置导航按钮样式-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">                <!--设置导航折叠区域，设置导航折叠样式-->
            <ul class="nav navbar-nav navbar-right dhul">        <!--设置列表区域，导航列表默认样式，导航列表右浮动-->
                <li class="active"><a href="ceshi.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>    <!--设置当前列表首先-->
                <li><a href="zix.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>                    <!--设置当前列表图标-->
                <li><a href="anl.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
                <li><a href="gyu.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--轮播图-->
<div id="myCarousel" class="carousel slide">                        <!--设置轮播器区域样式，设置轮播器滚动样式-->
    <ol 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>
    </ol>
    <div class="carousel-inner">                                    <!--设置轮播器图片区域-->
        <div class="item active tp1">                                <!--设置轮播器图片样式-->
            <a href="#"><img src="img/1.jpg" alt="第一张"></a>
        </div>
        <div class="item tp2">
            <a href="#"><img src="img/2.jpg" alt="第二张"></a>
        </div>
        <div class="item tp3">
            <a href="#"><img src="img/3.jpg" alt="第三张"></a>
        </div>
    </div>
    <!--设置轮播器箭头区域-->
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>


<!--案例-->
<div id="case">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case1.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动通信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case2.jpg" alt="">
                    <div class="caption">
                        <h4>中国石化</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case3.jpg" alt="">
                    <div class="caption">
                        <h4>中国联通</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case4.jpg" alt="">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case3.jpg" alt="">
                    <div class="caption">
                        <h4>中国联通</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case4.jpg" alt="">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case2.jpg" alt="">
                    <div class="caption">
                        <h4>中国石化</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case1.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动通信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case4.jpg" alt="">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case3.jpg" alt="">
                    <div class="caption">
                        <h4>中国联通</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case4.jpg" alt="">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case2.jpg" alt="">
                    <div class="caption">
                        <h4>中国石化</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



    <!--底部-->
<div class="dibu">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h4 class="text-center">联系方式</h4>
                <p>联系人:游先生</p>
                <p>手机:18681395066     13096006150</p>
                <p>座机:0813-8287339</p>
                <p>Q Q:350016919</p>
                <p>邮箱:350016919@qq.com</p>
                <p>地址:自贡市自流井区丹桂东段泰丰大厦1区8层7号 </p>
            </div>
            <div class="col-md-6">
                <h4 class="text-center">友情链接</h4>
                <ul class="list-unstyled">
                    <li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局</a></li>
                    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="banq">
    <div class="container text-center banq">
        <p>版权所有 © 自贡瑞佳财务咨询有限公司 未经许可 严禁复制</p>
        <p><a href="http://www.jxiou.com/" target="_blank">自贡玉秀文化传播技术支持</a></p>
        <p>蜀ICP备16022718号-1 </p>
    </div>
</div>

<!--引入jquery文件-->
<script src="jquery/jquery.min.js"></script>
<!--引入bootstrap里的js-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="ceshi.js"></script>
</body>
</html>

 

重点：利用栅格系统布局

weixin_34233618
关注
spark项目实战-电商分析平台
lukabruce的博客
03-25 1万+
第1章 项目概述 电商分析平台是对用户访问电商平台的行为进行分析。 1.1 项目简介   本项目主要讲解一个大型电商网站后台的企业级大数据统计分析平台，该平台以 Spark 为主，对电商网站的流量进行离线和实时的分析。   该大数据分析平台对电商网站的各类用户行为（访问行为、购物行为、广告点击行为等）进行复杂的分析。用统计分析出来的数据，辅助公司中的 PM（产品经理）、数据分析师以及管理人员分析现有产品的状况，并根据用户行为分析结果持续改进产品的设计，以及调整公司的战略和业务。最终达到用大数...
数据挖掘实战-基于word2vec的短文本情感分析
热门推荐
m0_64336780的博客
11-30 2万+
Word2vec 是 Word Embedding 的方法之一。他是 2013 年由谷歌的 Mikolov 提出的一套新的词嵌入方法，是一种神经网络概率语言模型，可以用于计算单词的词向量。与传统的高维词向量 one-hot representation 相比，Word2vec 词向量的维度通常在 100~300 维之间，减少了计算的复杂度，也不会造成向量维数灾难。除此之外，Word2vec词向量是根据词汇所在上下文计算出的，充分捕获了上下文的语义信息，很容易通过它计算两个词汇的相似程度。
全网超神bootstrap综合实战含源码
03-03
全网火爆的bootstrap综合实战，包含前台和后台项目，写代码，不枯燥！
Bootstrap4项目开发实战
06-25 453
一、企业网站项目 课件 0.课程简介 1.顶部区域的制作 2.导航区域的制作 3.轮播区域的制作 4.产品区域的制作 5.最新资讯区域的制作 6.底部区域的制作 二、化妆品网站项目 1.项目初始化_导航的制作 2.推荐区域的制作 3.产品特点区域的制作 4.星品宝贝区域的制作 5.移动APP下载区域的制作 6.公司简介区域的制作 7.联系我们区域的制作 8.底部区域的制作_滚动监听 ...
Bootstrap相关优质项目推荐
weixin_34380296的博客
02-13 574
Bootstrap 编码规范 by @mdoBootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。TypeScript 中文手册TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。React 用于构建用户界面的 JavaScript 框架React 起源于 Fac...
bootstrap实战项目总结 源码及知识点
北枫林
01-05 1万+
在学校里面参加了一个服创比赛，我的任务是前端，一个半月的寒假打算好好学Js，bootstrap，Vue，jQuery，现在先开始学习bootstrap。发现在实战项目中学习是一个不错的方法。 话不多说，直接上源码与做完后的图片，很多知识点我都在源码里详细注释了供大家参考，希望大家不断进步。 我是用webstrom做的，加上一点快捷键：ctrl+F在文件内快速查找代码 ctrl+D复制当前行...
第二百五十节，Bootstrap项目实战--响应式导航
weixin_30588675的博客
05-06 106
Bootstrap项目实战--响应式导航 学习要点： 　　1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步，声明导航区域，设置导航默认样式，设置导航条固定在顶部navbar样式class类，写在导航<nav>里，声明导航区域(项目实战Bootstrap)navbar-default样式class类，写在导航<nav>里，设...
python项目开发实例书-Python项目开发实战
weixin_37988176的博客
10-30 3525
本书案例具有实用性，如校园网搜索引擎、小小翻译器、抓取百度图片这些爬虫案例略加修改可以应用实际项目中；还有通过微信通信协议开发微信机器人，机器学习的文本分类、基于卷积神经网络的手写体识别等案例，另外是一些大家耳熟能详的游戏案例，比如连连看、推箱子、中国象棋、网络五子棋、两人麻将、人物拼图和飞机大战游戏等，让你对枯燥的Python语言学习充满乐趣￥70.40定价：￥79.80(8.83折)互联网大厂...
19套项目实战系列--Spring Cloud Spring Boot（整套源码）
qwert
07-27 1178
整套大型项目源码，需要的回复私信：19。
Kubernetes实战(一)-二进制部署Kubernetes集群
sre救赎之路
09-09 591
三台机器混合部署本文档的 etcd、master 集群和 woker 集群。/opt/k8s/bin 目录保存本文档下载安装的程序。本操作只需要在sre-master-node节点上进行。如果 DNS 不支持主机名称解析，还需要在每台机器的。退出，重新登录 root 账号，可以看到主机名生效。# 将当前的 UTC 时间写入硬件时钟。# 重启依赖于系统时间的服务。本操作所有节点均需要执行。本操作所有节点均需要执行。本操作所有节点均需要执行。本操作所有节点均需要执行。本操作所有节点均需要执行。
Python项目实战之基于Ansible的云平台自动化运维系统
daidadeguaiguai的博客
05-13 5153
项目介绍 本项目通过KVM虚拟化搭建Linux系统集群，使用 Ansible实现Linux集群下的批量部署与自动化管理， 实现Web形式的自动化运维系统,集中批量控制服务器, 最终实现能支撑1000台实例的环境提供管理和自 动化任务， 提高运维工程师的工作质量和效率。 项目基于HTTP实现自动化任务接受和响应接口设计， 基于MySQL用作的关系型数据存取， 基于Redis的任务锁机制和消息队列， 基于MongoDB的事件日志 记录， 最终实现邮件通知功能、敏感数据加密功能、日志事件记录功
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
汪子熙的专家技术分享
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
基于html+css+jquery+bootstrap响应式网页制作模板——红色中国文化主题：大美中国
weixin__BJ050106的博客
08-08 3203
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
Echarts 折线图
weixin_44443380的博客
11-08 216
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 912
关于vue2API的面试题
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 519
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 386
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 638
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
bootstrap-table-export插件实现HTML表格到Excel文件导出
- 引入Bootstrap-Table库以及bootstrap-table-export插件的CSS和JS文件到项目中。 - **基本配置**: - 初始化表格时，只需在表格的初始化选项中加入export: true选项即可启用导出功能。 - **自定义导出按钮**: -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值