Javascript Bootstrap的网格系统,导航栏和轮播详解
目录
- bootstrap简介及其相关内容
- 网格系统
- 列嵌套
- 列偏移
- 列排序
- 导航栏
- 轮播
- 总结
bootstrap简介及其相关内容
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。引用其时需要具备一定的基本模板：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
网格系统
bootstrap将页面或容器化氛围横向的12等份，行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。利用col-lg-(“number”）对横向的12等份进行分配。
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
列嵌套
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- col-md-6默认是水平分开两个盒子，如果只是单纯的div则会显示为上下分布 -->
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
</div>
列偏移
使用.col-md-offset-*可以将列向右偏移
<div class="container">
<div class="row">
<div class="col-md-4">坐厕</div>
<!-- 总共十二等份，两个盒子本来是只占了8列，还有四列未被使用，
故col-md-offset-4,所以右侧的盒子会继续向右偏移4列 -->
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
</div>
</div>
列排序
一般用于盒子调换顺序
<div class="container">
<div class="row">
<!-- 左右两个盒子同时使用push和pull元素，盒子才不会被压住 -->
<div class="col-md-4 col-md-push-8">坐厕</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
</div>
导航栏
- 向
<nav>标签添加class .navbar、.navbar-default。 - 向上面的元素添加
role="navigation"，有助于增加可访问性。 - <div> 元素添加一个标题
class .navbar-header，内部包含了带有class navbar-brand的 <a> 元素。这会让文本看起来更大一号。 - 为了向导航栏添加链接，只需要简单地添加带有
class .nav、.navbar-nav的无序列表即可。
演示如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 这两个script都必须要写否则就会下拉菜单无法出来 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- 这是一个响应式布局，当屏幕处于最大化时与屏幕缩小时的布局不一样 -->
<body>
<!-- role="navigation"有助于增加可访问性 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- "navbar-header"，内部包含了带有classnav-brand的<a>元素，会使文本看起来更大一号 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<!-- data-toggle用于告诉JavaScript需要对按钮做什么，icon-target指示要切换到哪一个元素，三个icon代表要创建所谓的汉堡按钮 -->
<span class="sr-only">切换导航</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="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
全局界面
小窗界面
轮播
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
实例演示：
<body> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <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> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <!-- 图片引用绝对路径，相对路径会出错 --> <img src="1.jpg" alt="First slide" style="width: 100%;height: 200px;"> </div> <div class="item"> <img src="2.jpg" alt="Second slide" style="width: 100%;height: 200px;"> </div> <div class="item"> <img src="3.jpg" alt="Third slide" style="width: 100%;height: 200px;"> </div> </div> <!-- 上下跳转控制，跳转控制可以前进货后退 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
Bootstrap 网格系统布局详解
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法. 一句话概括:网页设计中的网格用于组织内容,让网站易于浏览,并降低用户
-
BootStrap导航栏问题记录
今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我觉得最麻烦的就是要在bootstrap的格式下修改.我弄了好多次demo来虐导航栏.但是一直都没有头绪.知道昨晚在完玩狼人杀后,突然灵机一闪. 能不能通过内部的固定高度,来实现垂直平分的效果呢. 在查看psd图的效果是导航栏的a是垂直平分的. 那么我可否通过固定a超链接的高度来实现垂直平分呢? <div "h-nav"> <nav "container navbar nav
-
bootstrap实现轮播图效果
本文实例为大家分享了bootstrap实现轮播图效果的具体代码,供大家参考,具体内容如下 实现效果 步骤 1.下载bootstrap和jquery-3.6.0.min.js,并在html中引用,注意jq.js应在全部js前引用 2.按照官网https://v3.bootcss.com/javascript/的Carousel实例修改导入图片,body源码如下 <div class="box"> <div id="carousel-example-generi
-
bootstrap轮播模板使用方法详解
本文实例为大家分享了bootstrap轮播模板展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss
-
拥Bootstrap入怀——导航栏篇
写在前面 在该文中,我结合自己做的一个山水网页来聊一下Bootstrap的使用,网页截图如下: 完整网页的效果和代码可以点击这里查看或者到CodePen上查看.网页要达到的主要效果包括以下几点: 1.导航栏的登陆.注册按钮点击后弹出登陆.注册modal框,并且登陆.注册窗口可切换,菜单栏为响应式 2.导航栏中的山水选项可下拉,点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab 3.幻灯片大屏轮播 4.tab页点击切换 下面我们开始拥Bootstrap入怀. Bootstrap想必小伙伴们都
-
bootstrap网格系统使用方法解析
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. 工作原理 1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> <div class="row"&
-
Javascript Bootstrap的网格系统,导航栏和轮播详解
目录 bootstrap简介及其相关内容 网格系统 列嵌套 列偏移 列排序 导航栏 轮播 总结 bootstrap简介及其相关内容 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.引用其时需要具备一定的基本模板: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&q
-
xcode 左边导航栏中符合含义详解
xcode 左边导航栏中符合含义详解 "M" = Locally modified "U" = Updated in repository "A" = Locally added "D" = Locally deleted "I" = Ignored "R" = Replaced in the repository "–" "=&qu
-
Bootstrap实现默认导航栏效果
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="
-
JavaScript实现精美个性导航栏筋斗云效果
实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLeft获得当前盒子距离左侧的距离,把这个值赋给缓动动画的end值. •当点击的时候记住当前的offsetLeft值,当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值. 实现代码: 下面是实现代码以及详细注释,核心设置一个position为absolute的span标签,通过绑定鼠标事件
-
bootstrap自定义样式之bootstrap实现侧边导航栏功能
bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种做法,
-
使用BootStrap建立响应式网页——通栏轮播图（carousel）
1.bootstrap提供了js插件--轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载. 图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放). 承载轮播图的盒子高度:大图的的时
-
Bootstrap实现带暂停功能的轮播组件(推荐)
最近博主在项目中用到一款轮播组件,功能齐全,可以设置各种标题样式.动画效果.轮播时间.开始暂停等功能,在此推荐给大家,供大家参考. 一.效果展示 多说无益,来看一组效果展示图,感受一下! 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以. 6.如果你对上述滑动效果不满意,组件提供了其他几种图片切换方式 淡入淡出 水平滑动 7.再来一张图片定位 二.组件介绍 Orbit是
-
JS仿hao123导航页面图片轮播效果
hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi
-
BootStrap中jQuery插件Carousel实现轮播广告效果
轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果: 具体实现方法请看下面的代码: <div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟 <!-- 广告序号指示器
-
Bootstrap 折叠（Collapse）插件用法实例详解
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst