当前位置： 首页 > news >正文

用web做网站/品牌线上推广方案

news 2025/8/2 3:39:28
用web做网站,品牌线上推广方案,网站开发未完成被起诉,外汇网站怎么做优化Bootstrap框架的入门学习1. Bootstrap 概述2. Bootstrap 环境配置3. Bootstrap 基本使用4. Bootstrap 可视化布局5. 测试 demo1. Bootstrap 概述 Bootstrap是一个前端框架，由Twitter开发，非常受欢迎。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架&…

Bootstrap框架的入门学习

      • 1. Bootstrap 概述
      • 2. Bootstrap 环境配置
      • 3. Bootstrap 基本使用
      • 4. Bootstrap 可视化布局
      • 5. 测试 demo

1. Bootstrap 概述

Bootstrap是一个前端框架，由Twitter开发，非常受欢迎。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
相当于半成品；开发人员基于框架可以进行二次开发，大大的节省开发人员的开发时间。
特点：

  • 定义了很多的css样式和js插件，直接可以使用这些样式和插件得到丰富的 页面效果
  • 支持响应式布局，写一套页面就可以在不同分辨率的设备上有比较好的效果。

2. Bootstrap 环境配置

  1. 下载 Bootstrap：https://v3.bootcss.com/
  2. 创建 bootstrap 目录，导入 css/ fonts/ js/ ：
    Bootstrap 环境配置
  3. 导入 jQuery 库：bootstrap/js/jquery-3.5.1.min.js
  4. 将资源导入到页面：
    Bootstrap 样式文件：bootstrap/css/bootstrap.min.css
    jQuery 类库文件：bootstrap/js/jquery-3.5.1.min.js
    Bootstrap 类库文件：bootstrap/js/bootstrap.min.js
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

3. Bootstrap 基本使用

  • 样式：https://v3.bootcss.com/css/
    全局CSS样式/格栅系统/排版/表格/表单/按钮/图片/辅助样式等
  • 组件：https://v3.bootcss.com/components/
    下拉菜单/导航条/分页/标签/徽章/巨幕/页头/缩略图/警告框/进度条等
  • 插件：https://v3.bootcss.com/javascript/
    过滤效果/模糊框/滚动监听/标签页/工具提示/弹出框/Collapse(内容收缩)/Carousel(轮播图)等

CV大法，按需微调。

4. Bootstrap 可视化布局

  • Bootstrap 官方可视化布局工具：https://www.bootcss.com/p/layoutit/
    拖拽布局，【下载】按钮生成干净的HTML, 可以复制粘贴代码到项目。

  • 第三方可视化布局工具：

  1. ibootstrap.cn：http://www.ibootstrap.cn/
  2. 15 款最好的 Bootstrap 在线编辑工具：https://www.runoob.com/bootstrap/bootstrap-ui-editor.html

5. 测试 demo

效果图：
Bootstrap框架使用及可视化布局demo
源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>炎黄子孙旅游网</title><link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script><script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script><style>body {width: 100%;margin-left: auto;margin-right: auto;}.container-fluid {padding: 0;}/* 图片随窗口大小变化自动伸缩 */#top_banner {width: 100%;height: auto;}hr {margin-top: 5px;}.price {color: orange;}/* 需要两边留白且居中的主体内容 */.content {width: 80%;}.thumbnail {padding: 0;}</style>
</head>
<body>
<div class="container-fluid"><div class="row-fluid"><div class="span12"><%--顶部banner--%><img id="top_banner" src="image/top_banner.jpg" alt="top-banner"/><%--导航条--%><nav class="navbar navbar-default"><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 style="color: orange; margin-left: 10px" class="navbar-brand" href="#">炎黄子孙旅游网</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">名胜 <span class="sr-only">(current)</span></a></li><li><a href="#">古迹</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"aria-haspopup="true" aria-expanded="false">各地景区 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">郑州</a></li><li role="separator" class="divider"></li><li><a href="#">开封</a></li><li><a href="#">洛阳</a></li><li role="separator" class="divider"></li><li><a href="#">南阳</a></li><li><a href="#">驻马店</a></li><li><a href="#">平顶山</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="地区或景点名称"></div><button type="submit" class="btn btn-default">搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">关于我们</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">我的足迹</a></li><li><a href="#">我的旅记</a></li><li><a href="#">我的相册</a></li><li role="separator" class="divider"></li><li><a href="#">退出</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><%--轮播图--%><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="image/banner_1.jpg" alt="轮播图1"><div class="carousel-caption">...</div></div><div class="item"><img src="image/banner_2.jpg" alt="轮播图2"><div class="carousel-caption">...</div></div><div class="item"><img src="image/banner_3.jpg" alt="轮播图3"><div class="carousel-caption">...</div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">上一张</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">下一张</span></a></div></div></div>
</div>
<div class="content container-fluid"><div class="mod_title row-fluid"><div class="span12"><%--栏目标题--%><div style="margin-top: 20px"><div><img src="image/icon_5.jpg" alt="">旅游精选</div><hr/></div><%--栏目内容 2x4--%><div class="row-fluid"><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div></div><div class="row-fluid"><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div><div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p><span class="price">$699</span><a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a></div></div></div></div><%--分页栏--%><div align="center"><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</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">&raquo;</span></a></li></ul></nav></div></div></div><div class="row-fluid"><div class="span12"><%--栏目标题--%><div><div><img src="image/icon_6.jpg" alt="">人气推荐</div><hr/></div><%--栏目内容 1 + 2x3--%><div class="row-fluid"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 30%"><img style="width: 300px; height: 445px;" src="image/guonei_1.jpg" alt="特卖"></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 70%; padding: 0"><div class="row-fluid"><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_1.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p><span class="price">$699</span></div></div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_2.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p><span class="price">$699</span></div></div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_3.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p><span class="price">$699</span></div></div></div></div><div class="row-fluid"><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_4.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p><span class="price">$699</span></div></div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_5.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p><span class="price">$699</span></div></div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"><div class="thumbnail"><img src="image/jingxuan_6.jpg" alt="精选1"><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p><span class="price">$699</span></div></div></div></div></div></div></div></div>
</div>
<div class="container-fluid" style="background-color: #383838; width: 100%; height: 100px;"><div class="content container-fluid"><div class="row-fluid"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;"><img src="image/icon_1.jpg"></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; "><span style="font-size: 20px"><b>产品齐全</b></span><p style="color: gray; padding-top: 0px">产品全自主选，随心买</p></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;"><img src="image/icon_1.jpg"></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; "><span style="font-size: 20px"><b>便利快捷</b></span><p style="color: gray; padding-top: 0px">产品全自主选，随心买</p></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;"><img src="image/icon_1.jpg"></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; "><span style="font-size: 20px"><b>安全支付</b></span><p style="color: gray; padding-top: 0px">产品全自主选，随心买</p></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;"><img src="image/icon_1.jpg"></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; "><span style="font-size: 20px"><b>贴心服务</b></span><p style="color: gray; padding-top: 0px">产品全自主选，随心买</p></div></div></div></div>
</div></body>
</html>
http://www.lbrq.cn/news/1247545.html

相关文章：

  • 黑龙江网站备案管理局/项目平台
  • 网络公司网站模板/百度优化点击软件
  • 江门市建设工程投标网站/谷歌seo引擎优化
  • 建站平台软件/百度手机导航官方新版
  • 图片在线压缩/外包seo服务收费标准
  • 佛山市seo网站设计工具/百度爱采购竞价
  • 推广方式和渠道/谷歌seo公司
  • 怎么改网站模板/惠州网络营销公司
  • .net做的网站/深圳网站建设资讯
  • 网站的首页设计方案/四川seo快速排名
  • 广告图案大全图片素材/移动端关键词优化
  • 深圳做网站排名价格/市场营销策划公司排名
  • 外贸网站建设推广公司前景如何/北京本地网络推广平台
  • dw网站log怎么做/百度指数怎么查
  • 免费的黄冈网站有哪些平台软件/河北seo推广方案
  • ps做游戏网站/搜索引擎推广有哪些平台
  • 快速建立平台网站开发需要多少钱/百度搜索风云榜排名
  • 大连甘井子区二手房/seo的内容有哪些
  • 品牌网站建设流程/seo视频教程百度云
  • 怎么创建网站 免费的/外链相册
  • 旅游网站建设方案/网站开发的一般流程
  • 百度最容易收录的网站/郑州网络推广厂家
  • 网站后台浏览器/网站制作的基本流程是什么
  • 怎么做一键添加信任网站/百度竞价ocpc投放策略
  • wordpress标签分级/seo推广效果
  • 昆明网站建设咨询/网站关键词优化排名
  • 怎样 管理网站/北京做网站的公司有哪些
  • 网站建设及应用实施方案/平台连接
  • b站视频推广网站动漫/企业营销型网站
  • 建网站广州/外贸seo软文发布平台
  • [12月考试] E
  • 深入探索Weaviate：构建高效AI应用的数据库解决方案
  • 【预判一手面试问题：排序】
  • 大厂主力双塔模型实践与线上服务
  • MCU＋RTOS调试
  • AR眼镜：工业4.0时代高风险作业的安全守护者