[Boostrap 4] Problem z ukrywaniem elementów |
[Boostrap 4] Problem z ukrywaniem elementów |
12.04.2018, 13:21:09
Post
#1
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 12.04.2018 Ostrzeżenie: (0%) |
Witam.
Juz glupieje. Siedze trzecia godzine i nic. Problem wydaje mi sie byc gdzies w stylach css. Robilem juz roznie. Podpinalem pliki na swoim serwerze lub podpiolem jak na tej stronie: https://www.w3schools.com/bootstrap/bootstr...get_started.asp I ciagle to samo. Nie dziala ukrywanie elementow. Przyklad pomizej: CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="d-none">ddsd</div> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Rozwiń nawigacje</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" id="company">www.www.pl</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Sign Up<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Login" name="syslogin"> <input type="text" class="form-control" placeholder="Login" name="sysemail"> <input type="text" class="form-control" placeholder="Phone" name="sysphone"> </div> <button type="submit" class="btn btn-default">Sign In</button> </form> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> Wszystko inne dziala tzn nie wiem czy wszystko ale menu dziala, koloruje sie , style dzialaja ale nie dziala ukrywanie.. Ponizszy przyklad ktory jest na samym poczatku powiniem zostac ukryty dla kazdej rozdzielczosci <div class="d-none">test</div> ale sie tak nie dzieje. Probowalem rowniez d-block d-sm-none ktory ma wyswietlic element tylko na smartfonie. Dalej wyswietla nawet na kompie. <div class="d-block d-sm-none">test</div> Ktos wie o co chodzi Ten post edytował hopaj 12.04.2018, 13:22:13 |
|
|
12.04.2018, 13:44:25
Post
#2
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
Cześć,
prawdopodobnie działasz jeszcze na wersji alfa... (edit: teraz zobaczyłem, ze masz style z bootstrap 3...) To Ci pomoże: https://jsfiddle.net/jze8gqb1/225/ Ten post edytował aras785 12.04.2018, 13:49:49 |
|
|
12.04.2018, 13:56:50
Post
#3
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 12.04.2018 Ostrzeżenie: (0%) |
Dzieki ale to raczej powinno dzialac poniewaz.........sprawdz sobie sam ten przyklad:
https://getbootstrap.com/docs/3.3/getting-started/#template Dokladnie skopiowalem go i wkleilem bez zadnych zmian. Teraz dodalem prosty przykllad jak wczesniej i ..... dziala. Jak widzisz odwoluje sie tam do plikow wzglednie. Katalogi i pliki sa ok CODE <!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>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="d-none"> dsdsd </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="boostrap/js/bootstrap.min.js"></script> </body> </html> Przyklad dziala. Ukrywa diva ALE jesli dodam te menu..... CODE <!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>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Rozwiń nawigacje</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" id="company">buy-trip.com</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Sign Up<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Login" name="syslogin"> <input type="text" class="form-control" placeholder="Login" name="sysemail"> <input type="text" class="form-control" placeholder="Phone" name="sysphone"> </div> <button type="submit" class="btn btn-default">Sign In</button> </form> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> i usune diva ktory ma ukryc te warstwe menu jest bez formatowania. Dziala wiec js dziala ale css cos sie pitoli. Kiedy zmienie sciezke bezwzgledną na te z serwera jest znowu odwrotnie. Menu jest ok ale nie dziala ukrywanie. Zaraz odwiozą mnie do Tworek.... |
|
|
12.04.2018, 14:05:53
Post
#4
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
Chcesz korzystać ze styli Bootstrap 4, a podrzucasz linki z Bootstrap 3... zdecyduj się.
https://getbootstrap.com/docs/4.0/examples/ Wrzuć kod który Ci nie działa na jsfiddle - będzie łatwiej |
|
|
12.04.2018, 14:53:55
Post
#5
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 12.04.2018 Ostrzeżenie: (0%) |
to menu tez jest z B3?
Wziolem kod z tej strony ktora podeslales https://getbootstrap.com/docs/4.0/getting-s...d/introduction/ i dalej to samo. Po wklejeniu kodu menu brak jest formatowania tj wszystko jest na jednej "kupie". Ukrywanie zas dziala. CODE <!doctype html>
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container"> <div class="d-none d-md-block d-lg-none">ddsd</div> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Rozwiń nawigacje</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" id="company">www.www.pl</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Sign Up<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Login" name="syslogin"> <input type="text" class="form-control" placeholder="Login" name="sysemail"> <input type="text" class="form-control" placeholder="Phone" name="sysphone"> </div> <button type="submit" class="btn btn-default">Sign In</button> </form> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> Ten post edytował hopaj 12.04.2018, 15:01:09 |
|
|
12.04.2018, 15:08:49
Post
#6
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
Menu wrzucasz z Bootstrap 3...
https://jsfiddle.net/5Lbfntmw/296/ Menu: https://getbootstrap.com/docs/4.0/components/navbar/ |
|
|
Wersja Lo-Fi | Aktualny czas: 25.04.2024 - 18:43 |