bootstrap实战-起步案例的再编写

最新推荐文章于 2022-05-01 20:37:20 发布
最新推荐文章于 2022-05-01 20:37:20 发布
阅读量761 收藏 1
点赞数
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deepquiet/article/details/60590421
版权

固定位置的导航条：
（记事本写的，没有缩进）

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
  body{
    min-height:2000px;
    padding-top: 70px;
  }
</style>
</head>
<body>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- 广告牌 -->
<div class="container">
<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>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">   
<div class="active item" style="background:url('10.jpg'); background-size:cover;">  
<img src="10.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item" style="background:url('10.jpg'); background-size:cover;">
<img src="10.jpg" alt="...">
<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">Previous</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">Next</span>
</a>
</div>
</div>--> <!-- /container -->

<!-- 缩略图 -->
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="06.jpg" alt="hello">
<div class="caption">
<h3>Hi Winter</h3>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="11.jpg" alt="hello">
<div class="caption">
<h3>Hi Winter</h3>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="07.jpg" alt="hello">
<div class="caption">
<h3>Hi Winter</h3>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

结果：
这里写图片描述

deepquiet
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
bootstrap项目实例_精选开源SpringBoot项目：涵盖权限、搜索、秒杀、支付！值得学习...
weixin_39964528的博客
11-22 628
头条发文以来，分享了一些科技资讯，有趣的视频剪辑，今天首次整理一些开源项目分享。既是对自己的学习督促，也是对有需要人的一种便利。开源项目一：mall商城 star数：29.8k 项目地址：https://github.com/macrozheng/mallmall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署。 前台商城...
Bootstrap常用元素
lynch0571的专栏
09-14 1692
Theme Template for Bootstrap Navbars Toggle navigation
bootstrape实战案例_bootstrap实战经验
weixin_32980943的博客
12-31 224
凡是基本的布局需要float实现的，都可以考虑利用网格布局。1，.jumbotron可以形成一个青灰色的背景，并自动调节对应边距2，.panel的应用十分广泛，可以自动设置合适的padding.甚至利用它实现footer等(panel-footer)3, text-justify对齐方式的使用4，可以使用网格布局来控制图片的大小，结合max-width:100%.5，top 和left是针对元素的...
BootStrap项目案例
12-21
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的css前端框架，这是一个示例
bootstrapTable-treeView：treeView的bootstrapTable扩展
02-05
TreeView演示注意数据中必须包含parentId属性，根节点parentId=null ，子例程中根据配置的parentId == options[treeId] 。例如配置项\u4e2dtreeId='id' ，那么子上游的parentId属性将父父的id 数据必须包含parentId...
bootstrap-5.1.3-dist.zip
11-11
bootstrap 发布版本 5.1.3
bootstrap-table案例
05-05
该资源暂时只有查询功能，增删改未添加，相关文章：http://blog.csdn.net/sutongxuevip/article/details/56485113
swagger-bootstrap-ui-1.9.6-API文档-中文版.zip
07-13
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
bootstrap最新版资源下载不易。
Bootstrap实例工程
01-26
本工程为Bootstrap实例，实例详解请访问博主博客：http://blog.csdn.net/u013142781
bootstrap案例
03-25
bootstrap案例 bootstrap案例
【无标题】
weixin_63944861的博客
04-01 428
目录 准备工作 一、案例1：首页轮播图实现 主要用于组件：轮播-Carousel 二、案例2：首页书籍分类实现 主要用于组件：列表组-List group ​ 三、案例3：首页新书上架&热门书籍实现 页面内容需要：画像-Figure 四、案例4：首页整合 1、完善轮播图（左右箭头 指示灯样式） 2、完善新书上架&热门书籍 五、案例5：实现登录&注册页面 主要用于组件：表单-Forms 准备工作：页面中引入库 ① bootstrap.min.cs..
bootstrap 一排5个_如何通过导航条中的各个选项来控制标签页显示的内容（五）...
weixin_39884078的博客
12-29 119
本课程会围绕着BootstrapUI框架涉及到的技术来进行讲解，同时配合着大量的实战案例来巩固知识点以及积累项目经验。BootstrapUI框架中常见的全局css样式、组件和js插件通过我们会通过独立布局后台界面以及浏览器案例来巩固知识点本课程已经更新到了课程中，想学习web全栈课程的同学可以前往去学习51CTO官方专属交流群：697483006有关学习上的任何问题都可以在群中向老师提出来，老...
bootstrape实战案例_bootstrap 实战入门教程（一）
weixin_42498643的博客
12-23 427
说起响应式前端框架，比较而言，bootstrap还是不错的，虽然可能很多文档都是英文的。今天就整理下自己在学习及使用bootstrap3时的重要知识点和使用案例参考资料：1. 简介Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT。主要是为了支持移动端，所以pc端就很难做得跟以前pc那样复杂漂亮。在之前的 Boot...
4.3 BootStrap案例实战
热门推荐
kzl_knight的博客
05-22 1万+
1.3 BootStrap案例实战 关于BootStrap的文档详见： https://v3.bootcss.com/
BootStrap实战
s1124yy
04-12 429
导航栏 &lt;!-- 导航 --&gt; &lt;nav class="navbar navbar-default"&gt; &lt;div class="container-fluid"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class=
Bootstrap 案例
weixin_65089602的博客
05-01 397
案例思维导图 案例一：轮播图 代码展示： <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/lb1.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/lb
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
最新发布
06-12
- `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值