• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

problem z stopką,formularzem,podpięciem styli-bootstrap

Object Storage Arubacloud
0 głosów
109 wizyt
pytanie zadane 23 marca 2017 w HTML i CSS przez Damian Prymus Początkujący (380 p.)
Wiatjcie, mam pewien problem z którym nie potrafię sobie poradzić a więc:
zacznę od stopki,kilkam na przycisk i na sekundę się pojawia okienko z zawartością znika kod sprawdzałem kilka razy i kopiowałem gotowca i cały czas jest tak samo.
Z formularzem jest tak ze js napisłem i też ni działa jak by wgl. nie widział co jest tam napisane a jest podpięty.
i Style a chcę zmienić kolor menu i też nici. prbowałem .btn btn-primary i też w ten sposób .btn.btn-primary.
z góry dziękuję :)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>gotowiec</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
	 <script src="js/parallax-scroll.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>  
    <script src="js/bootstrap.js"></script>  
    <script src="js/form.js"></script>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
	
  </head>
  
  <body>
   <!-- navigacja navigacja navigacja navigacja navigacjanavigacja navigacja navigacja navigacja navigacja navigacja navigacjanavigacja navigacja navigacja -->
  
  <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
  <div class="container" >
  
  <div class="navbar-header">
  
  
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
  <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="index.html"><img src="zd.jpg" alt="logo"></a>
 </div>
 
 <div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" >
 <li><a href="#ja" class="btn btn-primary">czym się zajmuję 
<span class="glyphicon glyphicon-user"></span> </a>

 </li>
<li><a href="#moje" class="btn btn-primary">osiągnięcia
<span class="glyphicon glyphicon-education"></span> </a>
</li>

<li><a href="#contact"  class="btn btn-primary">Kontakt
<span class="glyphicon glyphicon-envelope"></span> </a>
</li>
<li><a href="wkorbie.html">bloog</a></li>
  
  </ul>
  </div>
  </div>
  
</nav>
<!-- koniec nawi-->
<!-- karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzEL-->
  <header>
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="kontakt.html">
	<img src="fota.jpg" alt="inormatyk" style="margin:auto;height:400px;width:500px: ">
	</a>
		<div class="carousel-caption">qwerty</div>
	</div>
	
	<div class="item">
	<img src="fotkii.jpg" alt="inormatyk" style="margin:auto;height:400px;width:500px:">
		<div class="carousel-caption">qwerty</div>
	</div>
	<div class="item">
	<img src="foty.jpg" alt="inormatyk" style="margin:auto;height:400px;width:500px:">
		<div class="carousel-caption">qwerty</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>

  </header>
<!-- koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec-->
<section class="parallax parallax-1"></section>
  
<!-- sekcje1 sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje -->
<div class="continer"> 


 <div class="row">
  <section id="ja" class="jumbotron">
          <div class="col-md-14 text-center">
            <h1 class="text-inverse">pierwszy obraz</h1>
			<img src="11.jpg" class="img-circle" alt="kolo" style="width:100px;height:100px;">
            <h3 class="bg-danger text-nowrap">pełne koło karbonowe</h3>
			 <button type="button" class="btn btn-default btn-lg">
 <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</button>
            <br>
            <br>
			<div class="col-md-14 text-center">
            <h1 class="text-inverse">drugi obrazek</h1>
				<img src="12.jpg" class="img-circle" alt="widelki caron" style="width:100px;height:100px;">
            <h3 class="bg-danger text-nowrap">tylne karbonowe widełki</h3>
            <br>
            <br>
			<div class="col-md-14 text-center">
            <h1 class="text-inverse">trzeci obrazek</h1>
			<img src="13.jpg" class="img-circle" alt="przednie widfrlki" style="width:100px; height:100px;">
            <h3 class="bg-danger text-nowrap">przednie karbonowe widełki</h3>
            <br>
            <br>
           
		   
		   
		   
          </div>
        </div>
        </div>
  </section>
</div>  
</div>  
  <section class="parallax parallax-2"></section>
  <section id="moje" class="jumbotron">
<!-- sekcje1 sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje -->
<div class="continer"> 
 <div class="row">
  <div class="col-md-14 text-center">
<h1 class="text-inverse">osiągniecia</h1>
           
          </div>
        </div>
        </div>
  </section>
  
  <section class="parallax parallax-1"></section>

<!-- sekcje1 sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje -->
<div class="continer"> 
 <div class="row">
 
    <section id="contact" class="jumbotron">
          <div class="col-md-14 text-center">

            <p class="bg-danger">formularz trzeba zrobić 
		</p>
			
            <br>
            <br>
           
          </div>
		  </section>
        </div>
        </div>
 
  
  <form action="#kontakt" method="post" onsubmit="return
checkForm();" >
<fieldset>
<legend>Formularz kontaktowy</legend>
 <label for="contactName">Imię</label>
 <input type="text" id="contactName"/>

<label for="contactEmail">Email</label>
 <input type="text" id="contactEmail" />
<input type="submit" value="Wyślij" />
</fieldset>
</form>

  

   
   <footer>
	<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		stopka
</button>	
	</div>
</footer>
<div class="modal fade" id="myModal" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Co w przyszłości na stronie?</h4>
			</div>
			<div class="modal-body">
				<p>
					
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger btn-sm hoverAnim" data-dismiss="modal">Zamknij</button>
			</div>
		</div>
	</div>
</div>


    </body>
</html>  

to jest do formularza

function checkForm()
{
 var error=false; //to znaczy, że danych nie brakuje
 var errorText=""; //komunikat z błędem
 var contactName = document.getElementById("contactName");
 var contactEmail = document.getElementById("contactEmail");
if (contactName.value == ""){
 errorText += "imię\n"
 error=true;
 }
 if (contactEmail.value == ""){
 errorText += "email\n"
 error=true;
 }
 if (!error) return true;
else{
alert ("Nie wypełniłeś następujących pól:\n" + errorText);
return false;
}
}

a tu css 

body
{
	font-size:18px;
	color:blue;

	font-family: 'Lato', sans-serif;

	
}
#zegar
{

font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	text-align: right;
		width: 100%;
		color:red;
		background:bloue;
	
}
.jumbotron h1
{
	font-family: 'Source Sans Pro', sans-serif;
	
}

p
{
	font-family: 'Source Sans Pro', sans-serif;
	size:10px;
	color:red;
}
.jumbotron
{


	background-color: black;

}

 .button
 {
	 border-radius:12px 10px 13px 11px;
 }
span.glyphicon.glyphicon-heart
{
	color:black;
}
span.glyphicon.glyphicon-heart:hover
{
	color:red;
}

img
{
	height:20px;
	margin-top:-3px;
	margin-left:-20px;

}
active li:hover
{
	color:red;
}
.navbar-default .nav li a .glyphicon {
color: #ff0000;
}

section.parallax
 {
height: 600px;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 
}
.parallax-1 
{
background-image: url('bg4.jpg');

}
.parallax-2
{
background-image: url('bg2.jpg');

}.parallax-3
{
background-image: url('bg1.jpg');

}.parallax-4
{
background-image: url('bg3.jpg');

}
.carousel-control
{
padding:30px;
}
 btn.btn-primary
 {
	    background-color:pink;
	
}
#carousel-example-generic
{
	width:50%;
	margin:auto;
}

 

1 odpowiedź

0 głosów
odpowiedź 26 kwietnia 2017 przez Jutta Obywatel (1,190 p.)
Witam,

musisz odwołania do biblioteki jQuery i skryptów JavaScript umieścić na końcu kodu strony (a nie tak jak u Ciebie w sekcji head); na samym końcu kodu tuż przed tagiem </body>.

Co do koloru manu:

możesz spróbować np.

.navbar-inverse {background-color: #ff9988;},

.navbar-inverse .navbar-nav > li > a {color: #144410;}

pozdrawiam,

Podobne pytania

0 głosów
2 odpowiedzi 319 wizyt
pytanie zadane 20 maja 2017 w HTML i CSS przez bart1996 Początkujący (360 p.)
0 głosów
0 odpowiedzi 121 wizyt
pytanie zadane 27 sierpnia 2020 w HTML i CSS przez Hansik Nowicjusz (170 p.)
+1 głos
5 odpowiedzi 571 wizyt
pytanie zadane 11 czerwca 2015 w HTML i CSS przez lukaszgo3 Początkujący (440 p.)

92,576 zapytań

141,426 odpowiedzi

319,652 komentarzy

61,961 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...