Μια ερωτηση για bootstrap navbar

[sinikos]

Καλησπέρα. Έχω φτιάξει μια navbar με τον παρακάτω κώδικα. Μπορείτε να μου πείτε πως μπορώ να συμπληρώσω τον κενό χώρο (μεχρι το τέλος του container με το searchbox. Δοκίμασα δίαφορους τρόπους που βρήκα αλλά δεν δουλεύει. για παράδειγμα: Αυτό, αυτό κλπ, προσθέτοντας την ανάλογη κλάση. Δοκίμασα και με στατικό width αλλά με προβλήματα στο responsive.

O κωδικάς μου είναι:

<div>
<nav class="navbar navbar-inverse navbar-fixed-top ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
		<a class="navbar-brand" style="padding:5px;" href="index.php"><img src="site_images/logo.png" alt="Logo"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <!---Menu--->
      <ul class="nav navbar-nav">
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        	   <!---Search--->
        <li>
            <form class="navbar-form" action="action_page.php">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Start typing..." name="search" style="font-size: 20px;">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
    </li>
      </ul>
    </div>
  </div>
</nav>
</div>

 

[The King]

19 λεπτά πριν, sinikos είπε

Καλησπέρα. Έχω φτιάξει μια navbar με τον παρακάτω κώδικα. Μπορείτε να μου πείτε πως μπορώ να συμπληρώσω τον κενό χώρο (μεχρι το τέλος του container με το searchbox. Δοκίμασα δίαφορους τρόπους που βρήκα αλλά δεν δουλεύει. για παράδειγμα: Αυτό, αυτό κλπ, προσθέτοντας την ανάλογη κλάση. Δοκίμασα και με στατικό width αλλά με προβλήματα στο responsive.

 

 

O κώδικας σου φαίνεται οτι χρησιμοποιεί Bootstrap 3 ενώ τα παραδείγματα που κοιτούσες είναι για Bootstrap 4.

Μπορείς να παραθέσεις τα css & js versions που φορτώνεις στην html για να βγει άκρη ; Υποθέτω ότι έχεις δοκιμάσει ήδη την κλάση container-fluid και δε σου κάνει.

Επεξ/σία 24 Ιουνίου 2018 από The King

[sinikos]

1 ώρα πριν, The King είπε

O κώδικας σου φαίνεται οτι χρησιμοποιεί Bootstrap 3 ενώ τα παραδείγματα που κοιτούσες είναι για Bootstrap 4.

Μπορείς να παραθέσεις τα css & js versions που φορτώνεις στην html για να βγει άκρη ; Υποθέτω ότι έχεις δοκιμάσει ήδη την κλάση container-fluid και δε σου κάνει.

Tο φορτώνω τοπικά το bootstrap

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="bootstrap/css/custom.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <title>My title</title>

Ο κώδικας του navbar είναι μια μίξη από τους κώδικες αυτούς https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

[The King]

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="stylesheet">

Αρχικά γιατί φορτώνεις 2 φορές το bootstrap.css (+bootstrap.min.css) ;

.

1. Τι έκδοση λέει μέσα το bootstrap.css;
2. Για τι έκδοση είναι το bootstrap.min.js ;
3. Δοκίμασες την κλάση container-fluid ;
4. Προτίμησε τα js να τα φορτώνεις στο τέλος πριν το </body> και όχι μέσα στο  <head></head> όπου θα κρατάς τα css
5. Το custom.css σου να βρίσκεται πάντα τελευταίο για να κάνει override όποιες εργοστασιακές τιμές θες να αντικαταστήσεις και έτσι θα μπορείς να αποφεύγεις στο μέτρο του δυνατού το !important

.

H έκδοση Bootstrap 3 από την 4 διαφοροποιείται σε πολλά σημεία (ακόμα και ανάμεσα σε υποεκδόσεις τους) και καλό είναι αρχικά να ελέγξεις ότι τόσο το css όσο και το js είναι ακριβώς για την ίδια έκδοση, (πχ 4.1.1 και στα δυο κλπ) καθώς και ο κώδικας που βρίσκεις σε online παραδείγματα απευθύνεται σε αυτές τις εκδόσεις.

Αν δεν είσαι σίγουρος φόρτωσε τα μέσω κάποιου CDN καλύτερα, πχ https://cdnjs.com/libraries/twitter-bootstrap

Επεξ/σία 24 Ιουνίου 2018 από The King

[sinikos]

1 ώρα πριν, The King είπε

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="stylesheet">

Αρχικά γιατί φορτώνεις 2 φορές το bootstrap.css (+bootstrap.min.css) ;

Νόμιζα οτι ήταν διαφορετικά και χρειάζονται και τα δύο.

.

1. Τι έκδοση λέει μέσα το bootstrap.css;
2. Για τι έκδοση είναι το bootstrap.min.js ;

Κοίταξα τα αρχεία και είναι 3.3.7

1. Δοκίμασες την κλάση container-fluid ;

Όχι. θα το δοκιμάσω. Σε όλο το navbar ή μόνο στο search-box;

1. Προτίμησε τα js να τα φορτώνεις στο τέλος πριν το </body> και όχι μέσα στο  <head></head> όπου θα κρατάς τα css

Ok. Τα έβαλα στο footer.php που το φορτώνω πρίν το </body>

1. Το custom.css σου να βρίσκεται πάντα τελευταίο για να κάνει override όποιες εργοστασιακές τιμές θες να αντικαταστήσεις και έτσι θα μπορείς να αποφεύγεις στο μέτρο του δυνατού το !important

Thanks! Το έβαλα

.

H έκδοση Bootstrap 3 από την 4 διαφοροποιείται σε πολλά σημεία (ακόμα και ανάμεσα σε υποεκδόσεις τους) και καλό είναι αρχικά να ελέγξεις ότι τόσο το css όσο και το js είναι ακριβώς για την ίδια έκδοση, (πχ 4.1.1 και στα δυο κλπ) καθώς και ο κώδικας που βρίσκεις σε online παραδείγματα απευθύνεται σε αυτές τις εκδόσεις.

Αν δεν είσαι σίγουρος φόρτωσε τα μέσω κάποιου CDN καλύτερα, πχ https://cdnjs.com/libraries/twitter-bootstrap

Τελικά το φόρτωσα από cdn. Αρχικά ήθελα να το φορτώνω αρχικά για να έχω τον έλεγχο. Μην έχει πέσει το CDN κλπ.

 

Έβαλα το bootstrap 4 και μου διαλυθηκε όλο το site

 

 

Επεξ/σία 24 Ιουνίου 2018 από sinikos

[Predatorkill]

Φιλε μου νομιζω πας κατευθειαν στα βαθεια, ψαξε στο youtube βιντεακια σχετικα με την bootstrap, θα σου λυθουν πολλες αποριες.

η 3 με την 4 οπως ειπωθηκε πριν, εχει μεγαλες διαφορες, λογικο ειναι να διαλυθει το ui.

[The King]

2 ώρες πριν, sinikos είπε

Έβαλα το bootstrap 4 και μου διαλυθηκε όλο το site

Τότε επέλεξε την 3.3.7, όπως σου είπα εκ πρώτης ο κώδικας σου φαίνεται για να θέλει την 3 αρκεί και τα 2 αρχεία (css & js) να είναι της ίδιας έκδοσης.

<nav class="navbar navbar-inverse navbar-fixed-top ">
  <div class="container-fluid">
    
    //rest of your code

    
</nav>

Επίσης δε χρειάζεται το <nav> να μπει σε div αν δε συντρέχει κάποιος λόγος, στην περίπτωση σου δε συντρέχει οπότε σβήσε το 1ο <div> και το τελευταίο που κλείνει στο τέλος.

Βγάλε τα παρακάτω προς το παρόν εάν δεν τα χρειάζεσαι

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

.

Κάτι που δεν παρατήρησα πριν, το jquery.js θα το φορτώνεις πριν το bootstrap.js και βρες πιο νέα έκδοση, πχ την jQuery 1.12.4

Επεξ/σία 24 Ιουνίου 2018 από The King

[sinikos]

1 ώρα πριν, The King είπε

Τότε επέλεξε την 3.3.7, όπως σου είπα εκ πρώτης ο κώδικας σου φαίνεται για να θέλει την 3 αρκεί και τα 2 αρχεία (css & js) να είναι της ίδιας έκδοσης.

Επειδή το site είναι ακόμα σχετικά στην αρχή (2-3 μέρες δουλειά). Το bs4 υπερτερεί πολύ σε σχέση με το 3? Αν έχει αρκετά πλεονεκτήματα, προτιμώ να ξαναφτιάξω από την αρχή τα χαλασμένα κομμάτια του site.

[The King]

10 λεπτά πριν, sinikos είπε

Επειδή το site είναι ακόμα σχετικά στην αρχή (2-3 μέρες δουλειά). Το bs4 υπερτερεί πολύ σε σχέση με το 3? Αν έχει αρκετά πλεονεκτήματα, προτιμώ να ξαναφτιάξω από την αρχή τα χαλασμένα κομμάτια του site.

 

Νομίζω στο επίπεδο που είσαι δεν υπερτερεί σε κάτι. Δες εδώ τις διαφορές , διάβασε και αυτό το άρθρο, αν και δε νομίζω ότι θα καταλάβεις γιατί θες λίγη δουλίτσα ακόμα γενικότερα σε HTML/CSS.

Πάντως  το ξεκινάς στραβά, προσπαθείς να φτιάξεις κάτι μέσα από παραδείγματα , κάνοντας "μίξη" από κώδικες άλλων όπως ανέφερες και δεν κάθεσαι 1-2 μέρες να διαβάσεις το documentation το οποίο στα δυσκολότερα του είναι επιπέδου νηπιαγωγείου.

Άρχισε από αυτό και μετά δε θα δυσκολευτείς, διάλεξε έκδοση 3 ή 4, αρκεί να αρχίσεις από μόνος σου και ό,τι γράφεις να είναι για την ίδια έκδοση αλλιώς θα καταλήγουν πάλι όλα αχταρμάς.

Bootstrap 3 Documentation
Bootstrap 4 Documentation
 

Επεξ/σία 24 Ιουνίου 2018 από The King

[sinikos]

1 λεπτό πριν, The King είπε

Νομίζω στο επίπεδο που είσαι δεν υπερτερεί σε κάτι.

Πάντως  το ξεκινάς στραβά, προσπαθείς να φτιάξεις κάτι μέσα από παραδείγματα , κάνοντας "μίξη" από κώδικες άλλων όπως ανέφερες και δεν κάθεσαι 1-2 μέρες να διαβάσεις το documentation το οποίο στα δυσκολότερα του είναι επιπέδου νηπιαγωγείου.

Άρχισε από αυτό και μετά δε θα δυσκολευτείς, διάλεξε έκδοση 3 ή 4, αρκεί να αρχίσεις από μόνος σου και ό,τι γράφεις να είναι για την ίδια έκδοση αλλιώς θα καταλήγουν πάλι όλα αχταρμάς.

Bootstrap 3 Documentation
Bootstrap 4 Documentation
 

Ναι και εγώ έχω καταλάβει οτι είναι ανορθόδοξο αυτό που κάνω. Προσπαθώ μέσα από το w3school να βγάλω άκρη. Το πρόβλημα είναι οτι δεν ξέρω καλά αγγλικά. Θα δω μήπως βρω και κανα βιβλίο στα Ελληνικά. Σε ευχαριστώ πολύ για το χρόνο σου πάντως!

[The King]

Μόλις τώρα, sinikos είπε

Ναι και εγώ έχω καταλάβει οτι είναι ανορθόδοξο αυτό που κάνω. Προσπαθώ μέσα από το w3school να βγάλω άκρη. Το πρόβλημα είναι οτι δεν ξέρω καλά αγγλικά. Θα δω μήπως βρω και κανα βιβλίο στα Ελληνικά. Σε ευχαριστώ πολύ για το χρόνο σου πάντως!

Δύσκολο να βρεις για Ελληνικά, καλύτερα μάθε λίγα Αγγλικά για αυτή τη δουλειά γιατί θα τα χρειαστείς σε οτιδήποτε κάνεις πάνω σε αυτή και δε θα βρίσκεις μεταφράσεις.

Καλή επιτυχία !