bootstrap的总结

最新推荐文章于 2023-07-10 17:18:02 发布
最新推荐文章于 2023-07-10 17:18:02 发布
阅读量606 收藏
点赞数
分类专栏： 前端页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huwenzhi1991/article/details/45199727
版权

第一页：美团上方实现

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">
</script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="http://g.alicdn.com/sj/dpl/1.4.3/css/sui.min.css" rel="stylesheet">
  <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.4.3/js/sui.min.js"></script>
</head>
<script type="text/javascript">
$(function() {
$("#xin").hover(function() {
$("#xin").removeClass("glyphicon-star-empty");
$("#xin").addClass("glyphicon-star");
}, function() {
$("#xin").removeClass("glyphicon-star");
$("#xin").addClass("glyphicon-star-empty");
});


});
</script>
<style type="text/css">
#drop1:hover{
border-left: 0.02px solid #999;
border-right: 0.02px solid #999;
}
.divide {
margin-left: 10px;
line-height: 28px;
border-left: 1px solid gray;
}
.dropdown-menu {
margin: 0;
}
li:hover .dropdown-menu {
display: block;
}
.dropdown a:HOVER {
text-decoration: none;
}
a:LINK{
color:#666;
}
a.success{
color:#f99a40;
}
body
{
font-family : 微软雅黑,宋体;
font-size: 12px;
color:#666;
}
.down{
border:0.03px solid #999; 
}
</style>
</head>


<body>
<div class="container" style="">
<div class="row">
<div class="col-md-6 ">
<ul class="list-unstyled list-inline">
<li>
<label>
<span class="glyphicon glyphicon-star-empty" id="xin"
style="cursor: pointer;"></span>收藏美团
</label>
</li>
<li class="success">
<a href="#" class="success" >登陆</a>
</li>
<li>
<a href="#">注册</a><span class="divide"></span>
</li>
<li class="dropdown">
<a href="#menu3" ><span class="glyphicon glyphicon-phone"></span>&nbsp美团手机</a>
<ul class="dropdown-menu" style="">
<li>
<a>免费下载美团手机</a>
<div></div>
</li>
<li  class="divider"></li>
<li class="active">
<a>免费下载美团手机</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<div class="col-md-6">
<ul class="list-inline pull-right">
<li>我的订单</li>
<li id="drop1" class="dropdown"></span>
<a href="#" >我的美团<span id="down1"></span><span class="caret"></span> <span class="divide"></a>
<ul class="dropdown-menu pull-right" style="">
<li>
<a>免费下载美团手机</a>
</li>
<li  class="divider"></li>
<li class="active">
<a>免费下载美团手机</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#menu3" >购物车0件<span class="caret"></span> <span class="divide"></span></a>
<ul class="dropdown-menu pull-right" style="">
<li>
<a>免费下载美团手机</a>
<div></div>
</li>
<li  class="divider"></li>
<li class="active">
<a>免费下载美团手机</a>
</li>
</ul>
</li>
<li>联系客服<span class="caret"></span><span class="divide"></span></li>
<li class="dropdown">
<a href="#" >&nbsp我是商家<span class="caret"></span><span class="divide"></span></a>
<ul class="dropdown-menu pull-right" style="">
<li>
<a>免费下载美团手机</a>
</li>
<li  class="divider"></li>
<li class="active">
<a>免费下载美团手机</a>
</li>
</ul>
</li>
<li>更多<span class="caret"></li>
</ul>
</div>
</div>
</div>
</div>
<div><hr style="margin-top: 2px;margin-bottom: 0px;"/></div>
<div class="container" style="margin-top: 0px;">
<img src="image/aaa.jpg" style="width: 100%;margin-top: 0px;margin-bottom: 10px;"/></div>
</div>
<!-- 这里是搜索蓝 -->
<div class="container">
<div class=row>
<div class="span2">
<span style="font-size: 40px;"><b><a>美团</a></b></span>

</div>
<div class="span10"></div>
<div class="span2"></div>
</div>

</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

bootstrap总结
qwedf339的博客
01-10 567
bootstrap 一、简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端响应式框架。 特点： 跨设备、跨浏览器；响应式布局；提供全面的组件；内置Jquery插件；定制 包含内容： 1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTM
前端框架Bootstrap总结
zk_813的博客
08-26 709
一.什么是Bootstrap 基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。bootstrap最为重要的部分就是它的响应式布局,通过这种布局可以兼容pc端,pad以及手机移动端的访问. 二.bootstrap的构成 Boot...
Bootstrap【第二章】全局CSS之排版&代码&表格
明思齐的博客
04-30 1161
前言：今天要学习的是Bootstrap的全局CSS之排版&代码&表格 一张图概括今天的内容： 一、排版 1.1、页面主题 1、段落突出：通过.lead类可以让段落突出显示 例如：<p class="lead">我家门前有两颗枣树</p> 1.2、标题 1.标题h1--h6和html中的效果一样 2.副标题：在<h1><small>副标题</small...
Bootstrap总结
qq_63339311的博客
11-21 1581
Bootstrap感悟：二级目录三级目录 二级目录 三级目录
Bootstrap 总结
aklnczz811147的博客
11-03 166
Bootstrap 首先要引入下面三个文件 <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Boo...
Bootstrap基本总结
m0_55132979的博客
05-18 881
（一）Bootstrap是什么 Bootstrap是世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你讲发现高质量的HTML、CSS以及JavaScript，使你的WED工程变得无比简单，包括官方的CDN和启动服务。 （二）怎么使用Bootstrap 一行CSS 复制下面的<link>样式表粘贴到网页<head>里面，并放在其他CSS文件之前 3行JS 全局组件运行在JQuery组件上，其中包括Popper.js,以及系统内置JavaScript插件。
bootstrap思想总结_学习Bootstrap后的一点小总结
weixin_35671110的博客
01-16 491
本章给大家带来学习Bootstrap后的一点小总结，让大家可以知道Bootstrap的组成、Bootstrap 的优缺点、Bootstrap 如何实现响应式布局(示例)。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。【相关视频推荐：Bootstrap教程】Bootstrap4特点：1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 r...
Bootstrap4 总结
xiangxiongfly
07-10 1058
Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。
bootstrap使用总结
qq_51986661的博客
09-11 1299
1.px pt em rem vw 几个单位2.px 绝对单位 网页布局最常用的单位，一般用于pc端布局。px像素的意思。版心是1200px3.pt 点 常用于印刷。或者ios常用的单位。我们前端基本不用。4.em 相对单位。1em就是当前一个文字大小。场景：段落首行缩进2个字。5.rem 相对单位。相对于的文字大小，跟其余标签没有任何关系。场景：做适配。bootstrap响应式布局，栅格系统
使用bootstrap总结
爱代码也爱生活
07-05 1978
bootstrap是个很不错的前端css框架，把很多按钮、表单、表格、图片css通用样式都写好了，而且浏览器兼容不需我们考虑 尤其是它的栅格系统很强大，在做响应式布局时候很有用，但是默认支持12列，一般也足够了，如果要自定义列，就要 它的less我没用过，网站性能优化里面有提尽量少用css表达式
bootstrap总结与例子
08-02
Bootstrap是世界上最受欢迎的前端开发框架，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网站。以下是对Bootstrap常用25个知识点的详细阐述： 1. **栅格系统**：Bootstrap的...
Bootstrap总结1
08-03
Bootstrap是前端开发中的一款流行框架，它极大地提高了开发效率，并能构建美观且响应式的网站。Bootstrap基于HTML、CSS和JavaScript技术，对初学者友好，因为它提供了丰富的预定义样式、组件和工具，使得开发者无需...
Bootstrap 总结
12-08
Bootsstrap 总结，各种控件的使用。
jsp的一套pager-taglib的使用总结
huwenzhi1991的专栏
04-04 1979
1，使用前的条件 ①,jar包:pager-talib 2,实现 ①,jsp页面:         this is the test pagination jsp  .goodsDiv{         positon:relative;         width:100px;         height:30px;         bo
数据库基础测验20241113.doc
11-13
数据库基础测验20241113.doc
微信小程序下拉选择组件
最新发布
11-13
微信小程序下拉选择组件
DICOM文件+DX放射平片-数字X射线图像DICOM测试文件
11-13
DICOM文件+DX放射平片—数字X射线图像DICOM测试文件，文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用，请勿用于非法用途。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值