Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
Bootstrap Navigation Brand, Suche, Login [HTML] Bootstrap Navigation Brand, Suche, Login
You last visited: Today at 14:31

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement


Advertise with us!

Bootstrap Navigation Brand, Suche, Login

Discussion on Bootstrap Navigation Brand, Suche, Login within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
Bootstrap Navigation Brand, Suche, Login

Hallo,

ich bin derzeit recht neu in der Bootstrap Welt und wollte mit 4.x starten.

Leider stoße ich gleich am Anfang auf ein Problem...
Es geht mir hierbei um die Navigation, welche sich über die gesamte Browserbreite erstreckt.

Der Aufbau orientiert sich an YouTube.

Als erstes Element kommt ein Logo gefolgt von einer Suche. Und hier ist auch schon mein Problem ich schaff es nicht die Suche breiter zu ziehen. Die steht fest bei geschätzten 250px. Alle Versuche die Suche um ein doppeltes zu verlängern schlug fehl.

Auf der Rechten Seite der Navigation taucht dann der Login auf. Dies bekomme ich jedoch auch noch hin.

Anbei die HTML-Struktur, die bis jetzt am besten passte...
HTML Code:
        <nav class="fixed-top bg-dark d-flex justify-content-star">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>
Danke für jeden Tipp!

Mit freundlichen Grüßen
Kroko
Masterkroko1 is offline  
Old 11/27/2017, 22:01   #2
 
LenoxArt's's Avatar
 
elite*gold: 0
The Black Market: 3/0/0
Join Date: Aug 2011
Posts: 613
Received Thanks: 137
<div class="container-fluid"> dann sollte sich der container über die gesamte breite strecken.

glaube dazu musstest du aber noch jquery mobile einbinden.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
LenoxArt's is offline  
Old 11/28/2017, 00:28   #3


 
False's Avatar
 
elite*gold: 0
The Black Market: 243/0/0
Join Date: Apr 2011
Posts: 11,118
Received Thanks: 2,435
Quote:
Originally Posted by Masterkroko1 View Post
Hallo,

ich bin derzeit recht neu in der Bootstrap Welt und wollte mit 4.x starten.

Leider stoße ich gleich am Anfang auf ein Problem...
Es geht mir hierbei um die Navigation, welche sich über die gesamte Browserbreite erstreckt.

Der Aufbau orientiert sich an YouTube.

Als erstes Element kommt ein Logo gefolgt von einer Suche. Und hier ist auch schon mein Problem ich schaff es nicht die Suche breiter zu ziehen. Die steht fest bei geschätzten 250px. Alle Versuche die Suche um ein doppeltes zu verlängern schlug fehl.

Auf der Rechten Seite der Navigation taucht dann der Login auf. Dies bekomme ich jedoch auch noch hin.

Anbei die HTML-Struktur, die bis jetzt am besten passte...
HTML Code:
        <nav class="fixed-top bg-dark d-flex justify-content-star">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>
Danke für jeden Tipp!

Mit freundlichen Grüßen
Kroko
Quote:
Originally Posted by LenoxArt's View Post
<div class="container-fluid"> dann sollte sich der container über die gesamte breite strecken.

glaube dazu musstest du aber noch jquery mobile einbinden.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Nein, erstens hat Jquery mobile nichts mit bootstrap zu tun zudem hat er eine ganz andere Frage gehabt.

@TE
Was hast du den alles schon versucht ?
Evtl. hilft dir dies weiter
False is offline  
Old 11/28/2017, 00:37   #4
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
Einiges, keine Ahnung das mache ich immer kruz nebenbei wenn ich ne Ablenkung brauch

HTML Code:
       <nav class="fixed-top bg-dark d-flex justify-content-star">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2 col-lg-6">
                <form class="form-inline">
                    <div class="input-group  col-lg-6">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>
Eine Möglichkeit wäre an den 2 divs die um die Suche sind col-lg-6 dranzuhauen. Nur kommt mir das nicht ganz richtig vor ... Auch funktionieren aus irgendein Grund nur Grade Zahlen wenn ich es mit col-lg-5 teste bekomme ich die alte größe
Masterkroko1 is offline  
Old 11/28/2017, 11:44   #5



 
xShizoidx's Avatar
 
elite*gold: 0
The Black Market: 279/0/0
Join Date: Feb 2011
Posts: 1,342
Received Thanks: 410
Habe mich noch nicht mit Bootstrap 4 beschäftigt, aber hier mal meine Lösung. Gibt vielleicht bessere Lösungen, aber die funktioniert auf jeden Fall und ist reponsive für alle Geräte.

HTML Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <style>
        a.navbar-brand {
            margin-right: 0;
            margin-left: 1em;
        }
        
        nav .row div:nth-of-type(2) form {
            width: 100%;
        }
        
        nav .row div:nth-of-type(2) form .input-group {
            width: 100%;
        }
        
        body > nav > div > div:last-child {
            margin-left: auto;
        }
        
        @media (max-width:991px) {
            body nav .row div:nth-of-type(1) {
                order: 1;
            }
            body nav .row div:nth-of-type(2) {
                order: 3;
            }
            body nav .row div:nth-of-type(2) form {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            body nav .row div:nth-of-type(3) {
                order: 2;
            }
        }
    </style>
</head>

<body>
    <nav class="fixed-top bg-dark">
        <div class="row">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2 col-lg-4 col-sm-12">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>
xShizoidx is offline  
Old 11/28/2017, 13:17   #6
 
elite*gold: 0
The Black Market: 0/0/0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
Ich hab dein Vorschlag genommen und noch etwas angepasst.
HTML Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <style>
        a.navbar-brand {
            margin-right: 0;
            margin-left: 1em;
        }
        
        nav .row div:nth-of-type(2) form {
            width: 100%;
        }
        
        nav .row div:nth-of-type(2) form .input-group {
            width: 100%;
        }
        
        @media (max-width:767px) {
            body nav .row div:nth-of-type(1) {
                order: 1;
            }
            body nav .row div:nth-of-type(2) {
                order: 3;
            }
            body nav .row div:nth-of-type(2) form {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            body nav .row div:nth-of-type(3) {
                order: 2;
            }
        }
    </style>
</head>

<body>
    <nav class="fixed-top bg-dark">
        <div class="row">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2 col-lg-4 col-md-4 col-12">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>
So Funktioniert es und sieht auch ganz akzeptabel aus. Vielen Dank.
Nun muss ich mir mal Überlegen wo die eig. Navigation (Menüpunkte) hin
kommt.
Masterkroko1 is offline  
Thanks
1 User
Reply

« Suche Hosting.. | PHP Bilder ausgeben: 3 Bilder pro Reihe mit Flex Problem »

Similar Threads Similar Threads
Suche kleine Bootstrap Seite! Biete PayPal
01/03/2016 - Coders Trading - 3 Replies
Suche ein kleines Bootstrap Template.. (Srtandart Design nur struktur von euch .. Sprich Jumbertron usw nach meinen angaben positionieren) Für mehrere Details, Teamspeak3: botz.cc:10103 (Habt keine scheu zu redet, kriegt ja Geld für :D) Zahle per PayPal, aber nicht so viel da es nur eine Index werden soll vlt auch noch eine kleine Seite, ;D
Bootstrap session_start(); Fehler!
12/13/2013 - Web Development - 6 Replies
Einige von euch kennen wahrscheinlich Bootstrap, ich habe jetzt eine Seite "entwickelt" mit Bootstrap. Und jetzt kommt ein Fehler beim erstellen eines Logins. Fehler: Warning: session_start() : Cannot send session cookie - headers already sent by (output started at /users/computerstream/www/index.php:1) in /users/computerstream/www/index.php on line 2 Warning: session_start() : Cannot send session cache limiter - headers already sent (output started at...
PHP Bootstrap problem ( white row )
11/29/2013 - Web Development - 2 Replies
hello all, i am creating web page for school project and when I created switch, some white rows appears on web page: http://www.hojko.com/download/file.php?id=121629& amp;mode=view/wat.jpg index.php <?php session_start(); ob_start(); header("Content-Type: text/html; char - Pastebin.com Can you help me how to delete those white rows? thanks :)
[C++]Bootstrap DLL
05/01/2012 - C/C++ - 3 Replies
Hi Com. Ich habe folgendes Problem: Ich habe eine C# DLL die eine Form anzeigen soll, nachdem ich sie in ein Prozess injiziert habe. public static int MyMethod(String pwzArgument) { Form1 F1 = new Form1(); F1.Show();



All times are GMT +2. The time now is 14:31.

elitepvpers - play less, get more - Top

Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.