首页 \ 问答 \ 导航栏下的Bootstrap轮播(Bootstrap carousel under navbar)

导航栏下的Bootstrap轮播(Bootstrap carousel under navbar)

mysql 
 所以我工作的这个网站必须有一个背景（客户想要它，我讨厌它..）我已经使导航栏透明，所以背景图像显示在它背后。 现在我想添加一个位于导航栏下方的旋转木马并且无论如何都不会重叠。 我仍然需要导航栏后面的图像背景图像这是我到目前为止所拥有的： 
 

 

 
 
 
  
/*!
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
更新时间：2024-01-21 17:01

最满意答案

 看到这个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?)[2022-11-27]

    看到这个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/mys ...

  • 有什么数据库专业书籍介绍？[2022-05-19]

    mysql

  • MySQL - 索引innodb外键(MySQL - indexing innodb foreign keys)[2022-04-10]

    InnoDB中索引外键的性能有所改善吗？ 答：不会。由于密钥重复，性能会下降。 你不需要 INDEX `job_fk1` (`user`), INDEX `job_fk2` (`job`), 这些将由InnoDB在内部自动创建。 但是您需要拥有users （ id ）和jobs （ id ）的索引，以便在assignments表上更快地进行操作 http://dev.mysql.com/doc/refman/5.0/en/innodb-foreign-key-constraints.html “InnoD ...

  • 自己的MySQL外键(MySQL foreign keys on self)[2022-01-27]

    将列idParent的类型更改为int(10) unsigned 。 所以它与引用列idBC类型相同。 DROP TABLE IF EXISTS `biological classification`; CREATE TABLE `biological classification` ( `idBC` int(10) unsigned NOT NULL AUTO_INCREMENT, `idParent` int(10) unsigned DEFAULT NULL, `type` varchar ...

  • MySQL中的外键基础(Basics of Foreign Keys in MySQL?)[2023-11-29]

    FOREIGN KEYS只是确保您的数据一致。 他们不会在效率感方面改进查询，只是使一些错误的查询失败。 如果你有这样的关系： CREATE TABLE department (id NOT NULL) CREATE TABLE employee (id NOT NULL, dept_id NOT NULL, FOREIGN KEY (dept_id) REFERENCES department(id)) 那么如果某个department有一些employee ，你就不能删除department 。 如果 ...

  • MySQL外键问题(MySQL Foreign Keys Issue)[2022-04-19]

    两件事情。 auto_increment键通常是外键。 其次，您需要引用所有定义为表的主键或唯一键的键（我不建议对外键引用非唯一键，尽管MySQL会这么做）。 所以： create table Song ( Song_ID int not null auto_increment, Title varchar(255) not null, Length float not null, primary key (ID), unique (title) ); creat ...

  • 使用外键在mysql中工作(Working in mysql with foreign keys)[2022-05-02]

    您误解了外键的概念。外键是用于将两个表链接在一起的键。因此，为了将特定行与其父行相关联，您应该在子中输入其引用（父键的主键）。 它不是自动的..你必须在tblAddress和tblContact手动输入tblCustomer的tblAddress以包含依赖项。 你没有在你的代码中这样做..这就是为什么你得到null。 mysql如何知道您在tblAddress和tblContact中放入的数据是否与特定客户相关？ 如果您希望自动执行此操作，可以使用LAST_INSERT_ID()创建触发器。 例：- CRE ...

  • MySQL外键：我应该设置它吗？(MySQL Foreign keys: should i set it up?)[2023-04-30]

    是。 外键约束强制实施参照完整性，这是确保数据可靠和高质量的关键原则。 否则，您的people_address表可以引用people表中不存在的people_id值，并且可能是孤儿。 外键约束可以防止这种情况发生。 所以，就这么做吧。 真的没有理由不这样做。 在people_email表上定义以下外键： ALTER TABLE people_email ADD CONSTRAINT FOREIGN KEY（people_id）REFERENCES people（id）ON DELETE CASCADE; 这 ...

  • 你需要在MySQL中设置外键吗？(Do you need to set foreign keys in MySQL?)[2023-02-09]

    是的，一个具体的原因是如果想要连接表格，可以更快地检索行。 创建外键约束会自动在该列上创建一个索引。 所以表格地址'模式应该看起来像这样（ 假设People的表格主键是PERSON_ID ） CREATE TABLE Address ( Address_ID INT, Person_ID INT, ......, CONSTRAINT tb_pk PRIMARY KEY (Address_ID), CONTRRAINT tb_fk FOREIGN KEY (Perso ...

  • 这是Mysql外键的工作吗？(Is this a job for Mysql Foreign Keys?)[2024-01-16]

    外键不执行删除数据的工作。 它们确保您不会将数据输入到父表中无效的字段中。 即如果您在users表中没有UserId 100，则无法在子表中输入UserId 100的记录。 使用Cascading Deletes和外键说的就是你所要求的，但要确保这是你真正想要发生的事情。 您是否真的想要删除给定用户的所有帖子，如果他们删除了他们的帐户，并且所有回复帖子一直向下发送到主帖子。 你真的需要知道你正在做什么来正确使用级联删除而不是真正搞乱你的数据。 Foreign keys don't do the work o ...

相关文章

更多
  • BootStrap入门教程 (四)
  • BootStrap入门教程 (三)
  • 使用bootstrap和metroui设计的微网站或手机app界面
  • BootStrap入门教程 (一)
  • BootStrap入门教程 (二)
  • Bootstrap视频教程-宁皓网：Bootstrap 网页设计用户界面架构
  • Bootstrap响应式网页布局视频教程
  • Bootstrap基础视频教程-尚学堂视频教程
  • Bootstrap3与artDialog绝配搭建图书管理系统
  • 顶 Opencart &Bootstrap&Android&IOS&JsonRPC&微信公众平台

    • 最新问答

    更多
  • 如何在Laravel 5.2中使用paginate与关系？(How to use paginate with relationships in Laravel 5.2?)
  • linux的常用命令干什么用的
  • 由于有四个新控制器，Auth刀片是否有任何变化？(Are there any changes in Auth blades due to four new controllers?)
  • 如何交换返回集中的行？(How to swap rows in a return set?)
  • 在ios 7中的UITableView部分周围绘制边界线(draw borderline around UITableView section in ios 7)
  • 使用Boost.Spirit Qi和Lex时的空白队长(Whitespace skipper when using Boost.Spirit Qi and Lex)
  • Java中的不可变类(Immutable class in Java)
  • WordPress发布查询(WordPress post query)
  • 如何在关系数据库中存储与IPv6兼容的地址(How to store IPv6-compatible address in a relational database)
  • 是否可以检查对象值的条件并返回密钥？(Is it possible to check the condition of a value of an object and JUST return the key?)
  • GEP分段错误LLVM C ++ API(GEP segmentation fault LLVM C++ API)
  • 绑定属性设置器未被调用(Bound Property Setter not getting Called)
  • linux ubuntu14.04版没有那个文件或目录
  • 如何使用JSF EL表达式在param中迭代变量(How to iterate over variable in param using JSF EL expression)
  • 是否有可能在WPF中的一个单独的进程中隔离一些控件？(Is it possible to isolate some controls in a separate process in WPF?)
  • 使用Python 2.7的MSI安装的默认安装目录是什么？(What is the default installation directory with an MSI install of Python 2.7?)
  • 寻求多次出现的表达式(Seeking for more than one occurrence of an expression)
  • ckeditor config.protectedSource不适用于editor.insertHtml上的html元素属性(ckeditor config.protectedSource dont work for html element attributes on editor.insertHtml)
  • linux只知道文件名,不知道在哪个目录,怎么找到文件所在目录
  • Actionscript：检查字符串是否包含域或子域(Actionscript: check if string contains domain or subdomain)
  • 将CouchDB与AJAX一起使用是否安全？(Is it safe to use CouchDB with AJAX?)
  • 懒惰地初始化AutoMapper(Lazily initializing AutoMapper)
  • 使用hasclass为多个div与一个按钮问题(using hasclass for multiple divs with one button Problems)
  • Windows Phone 7：检查资源是否存在(Windows Phone 7: Check If Resource Exists)
  • 无法在新线程中从FREContext调用getActivity（）？(Can't call getActivity() from FREContext in a new thread?)
  • 在Alpine上升级到postgres96（/ usr / bin / pg_dump：没有这样的文件或目录）(Upgrade to postgres96 on Alpine (/usr/bin/pg_dump: No such file or directory))
  • 如何按部门显示报告(How to display a report by Department wise)
  • Facebook墙贴在需要访问令牌密钥后无法正常工作(Facebook wall post not working after access token key required)
  • Javascript - 如何在不擦除输入的情况下更改标签的innerText(Javascript - how to change innerText of label while not wiping out the input)
  • WooCommerce / WordPress - 不显示具有特定标题的产品(WooCommerce/WordPress - Products with specific titles are not displayed)

    • Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！