导航栏下的Bootstrap轮播(Bootstrap carousel under navbar)
所以我工作的这个网站必须有一个背景(客户想要它,我讨厌它..)我已经使导航栏透明,所以背景图像显示在它背后。 现在我想添加一个位于导航栏下方的旋转木马并且无论如何都不会重叠。 我仍然需要导航栏后面的图像背景图像这是我到目前为止所拥有的:
/*! Main Page CSS || Created By Thomas Withers @ Ice7Media */ /* Global Styles ============================================================ */ html { background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body { width: 100%; height: 100%; font-family: 'Open Sans', sans-serif; color: #000; } h1, h2, h3, h4, h5 { font-family: 'Oswald', 'Open Sans', sans-serif; color: #000; } p { font-family: 'Open Sans', sans-serif; color: #000; } /* Global Navbar Formatting ==============================================================*/ .navbar { padding-bottom: 10px; } .navbar ul { margin-top: 20px; } .navbar.transparent.navbar-default { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0,0,0,0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00))); background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); } /* Global Footer Formatting ==============================================================*/ /* Home Page Formatting ==============================================================*/ /*Full Width Slider Formatting */ /* Carousel base class */ .carousel { padding-top: 100px; height: 100%; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color:#bbb; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; } /* Menu's Page Formatting ==============================================================*/ /* E-Club Page Formatting ==============================================================*/ /* Events Page Formatting ==============================================================*/ /* Contact Page Formatting ==============================================================*/
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta charset ===================================================================================--> <meta charset="utf-8"> <!-- Title ===================================================================================--> <title>Bocaditio | South Amercian Dishes</title> <!-- Meta Tags ===================================================================================--> <meta name="author" content="Thomas Withers @ Ice7Media"> <meta name="description" content="Social Media Wizzards that handle all of your social media markerting."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- CSS Stylesheets ===================================================================================--> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/Custom.css" rel = "stylesheet"> <link href = "css/Mapstyle.css" rel = "stylesheet"> <link rel="stylesheet" href="css/animate.css"> <link rel="shortcut icon" href="img/iceBox.png"> <!-- Custom Fonts ===================================================================================--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- Navigation ===================================================================================--> <div class = "navbar transparent navbar-default navbar-fixed-top"> <div class = "container"> <a href = "index" class = "navbar-brand"> <img src="img/BocaditoLogo.png"> </a> <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <div class = "collapse navbar-collapse navHeaderCollapse"> <ul class = "nav navbar-nav navbar-right"> <li><a href = "index.html">Home</a></li> <li><a href = "about.html">Menus</a></li> <li><a href = "e-clubs.html">E-Clubs</a></li> <li><a href = "contact.php">Contact</a></li> </ul> </div> </div> </div> <!-- Full screen Slider ===================================================================================--> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <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"> <img src="/assets/example/bg_suburb.jpg" class="fill"> <div class="container"> <div class="carousel-caption"> <h1>Bootstrap 3 Carousel Layout</h1> <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> </div> </div> </div> <div class="item"> <img src="http://lorempixel.com/1500/600/abstract/1"> <div class="container"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <!-- /.carousel --> <!-- Abouts Us & Logo ===================================================================================--> <!-- Top Dishes ===================================================================================--> <!-- footer ===================================================================================--> <!-- Scripts ===================================================================================--> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script> <!-- Scrolling Nav JavaScript --> <script src="js/jquery.easing.min.js"></script> <script src="js/scrolling-nav.js"></script> <script src="js/main.js"></script> <script> $('.carousel').carousel({ interval: 5000 //changes the speed }) </script> </body> </html>
正如你所看到的,我所希望的影响没有实现,任何帮助将不胜感激!
So this site I'm working in has to have a background (Clients wants it, I hate it..) I have made the navbar transparent so the background image show behind it. Now id like to add in a carousel that is below the navbar and doesn't overlap in anyway. I still need the image background image behind the navbar this is what i have so far:
/*! Main Page CSS || Created By Thomas Withers @ Ice7Media */ /* Global Styles ============================================================ */ html { background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body { width: 100%; height: 100%; font-family: 'Open Sans', sans-serif; color: #000; } h1, h2, h3, h4, h5 { font-family: 'Oswald', 'Open Sans', sans-serif; color: #000; } p { font-family: 'Open Sans', sans-serif; color: #000; } /* Global Navbar Formatting ==============================================================*/ .navbar { padding-bottom: 10px; } .navbar ul { margin-top: 20px; } .navbar.transparent.navbar-default { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0,0,0,0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00))); background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); } /* Global Footer Formatting ==============================================================*/ /* Home Page Formatting ==============================================================*/ /*Full Width Slider Formatting */ /* Carousel base class */ .carousel { padding-top: 100px; height: 100%; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color:#bbb; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; } /* Menu's Page Formatting ==============================================================*/ /* E-Club Page Formatting ==============================================================*/ /* Events Page Formatting ==============================================================*/ /* Contact Page Formatting ==============================================================*/
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta charset ===================================================================================--> <meta charset="utf-8"> <!-- Title ===================================================================================--> <title>Bocaditio | South Amercian Dishes</title> <!-- Meta Tags ===================================================================================--> <meta name="author" content="Thomas Withers @ Ice7Media"> <meta name="description" content="Social Media Wizzards that handle all of your social media markerting."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- CSS Stylesheets ===================================================================================--> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/Custom.css" rel = "stylesheet"> <link href = "css/Mapstyle.css" rel = "stylesheet"> <link rel="stylesheet" href="css/animate.css"> <link rel="shortcut icon" href="img/iceBox.png"> <!-- Custom Fonts ===================================================================================--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- Navigation ===================================================================================--> <div class = "navbar transparent navbar-default navbar-fixed-top"> <div class = "container"> <a href = "index" class = "navbar-brand"> <img src="img/BocaditoLogo.png"> </a> <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <div class = "collapse navbar-collapse navHeaderCollapse"> <ul class = "nav navbar-nav navbar-right"> <li><a href = "index.html">Home</a></li> <li><a href = "about.html">Menus</a></li> <li><a href = "e-clubs.html">E-Clubs</a></li> <li><a href = "contact.php">Contact</a></li> </ul> </div> </div> </div> <!-- Full screen Slider ===================================================================================--> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <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"> <img src="/assets/example/bg_suburb.jpg" class="fill"> <div class="container"> <div class="carousel-caption"> <h1>Bootstrap 3 Carousel Layout</h1> <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> </div> </div> </div> <div class="item"> <img src="http://lorempixel.com/1500/600/abstract/1"> <div class="container"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <!-- /.carousel --> <!-- Abouts Us & Logo ===================================================================================--> <!-- Top Dishes ===================================================================================--> <!-- footer ===================================================================================--> <!-- Scripts ===================================================================================--> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script> <!-- Scrolling Nav JavaScript --> <script src="js/jquery.easing.min.js"></script> <script src="js/scrolling-nav.js"></script> <script src="js/main.js"></script> <script> $('.carousel').carousel({ interval: 5000 //changes the speed }) </script> </body> </html>
As you can see my desired affect is not being achieved any help will be appreciated!
原文:https://stackoverflow.com/questions/32455140
满意答案
看到这个http://www.databasejournal.com/features/mysql/article.php/2248101/Referential-Integrity-in-MySQL.htm
您可以在任何MySQL表类型(包括默认的MyISAM表类型)中'定义'一个外键,但它们实际上并没有做任何事情 - 它们仅用于在InnoDB表中强制执行参照完整性。
OP应该被认为是“虚构”的概念。
See this http://www.databasejournal.com/features/mysql/article.php/2248101/Referential-Integrity-in-MySQL.htm
You can 'define' a foreign key in any MySQL table type (including the default MyISAM table type), but they do not actually do anything - they are only used to enforce referential integrity in InnoDB tables.
The OP should be excused to think it is an "imaginary" concept.
相关问答
更多MySQL中必须使用外键吗?(Are foreign keys mandatory in MySQL?)
有什么数据库专业书籍介绍?
MySQL - 索引innodb外键(MySQL - indexing innodb foreign keys)
自己的MySQL外键(MySQL foreign keys on self)
MySQL中的外键基础(Basics of Foreign Keys in MySQL?)
MySQL外键问题(MySQL Foreign Keys Issue)
使用外键在mysql中工作(Working in mysql with foreign keys)
MySQL外键:我应该设置它吗?(MySQL Foreign keys: should i set it up?)
你需要在MySQL中设置外键吗?(Do you need to set foreign keys in MySQL?)
这是Mysql外键的工作吗?(Is this a job for Mysql Foreign Keys?)
相关文章
更多BootStrap入门教程 (四)
BootStrap入门教程 (三)
使用bootstrap和metroui设计的微网站或手机app界面
BootStrap入门教程 (一)
BootStrap入门教程 (二)
Bootstrap视频教程-宁皓网:Bootstrap 网页设计用户界面架构
Bootstrap响应式网页布局视频教程
Bootstrap基础视频教程-尚学堂视频教程
Bootstrap3与artDialog绝配搭建图书管理系统
顶 Opencart &Bootstrap&Android&IOS&JsonRPC&微信公众平台
最新问答
更多获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
如何通过引用返回对象?(How is returning an object by reference possible?)
矩阵如何存储在内存中?(How are matrices stored in memory?)
每个请求的Java新会话?(Java New Session For Each Request?)
css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
xcode语法颜色编码解释?(xcode syntax color coding explained?)
在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号
本站部分内容来源于互联网,仅供学习和参考使用,请莫用于商业用途。如有侵犯你的版权,请联系我们(neng862121861#163.com),本站将尽快处理。谢谢合作!