Θέμα με bootstrap

rafinos · 1 Μαρτίου 2016

Γεια σας παιδιά!

Είπα να πειραματιστώ λίγο με bootstrap καθώς τελείως άσχετος με το εν λόγω framework. Έτσι έκανα μια navbar και έχω το εξής θέμα.

Όταν γίνεται active (με class) ένα από τα links του navbar γίνεται γκρίζο ενώ το έχω ορίσει να γίνεται κίτρινο. Πατώντας βέβαια σε οποιοδήποτε άλλο σημείο της σελίδας αλλάζει το χρώμα και γίνεται κίτρινο όπως θα έπρεπε.

Δείτε τις δύο εικόνες για να καταλάβετε.

Ορίστε και ο κώδικας

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
	
	<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
		<div class = "navbar-header">
			<button type = "button" class = "navbar-toggle" 
				data-toggle = "collapse" data-target = "#example-navbar-collapse">
				<span class = "sr-only">MovieQUIZ.gr</span>
				<span class = "icon-bar"></span>
				<span class = "icon-bar"></span>
				<span class = "icon-bar"></span>
			</button>
			<a class = "navbar-brand" href = "index.html">MovieQUIZ.gr</a>
		</div>
   
		<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
			<ul class = "nav navbar-nav">
				<li class = "active"><a href = "#">Πληροφορίες</a></li>
				<li class = "dropdown">
					<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
						Download
						<b class ="caret"></b>
					</a>
					<ul class = "dropdown-menu">
						<li><a href="#" >Play Store</a></li>
						<li><a href="#" >Κατέβασμα αρχείου</a></li>
					</ul>
				</li>
				<li><a href="#">Screenshots</a></li>
				<li><a href="#">Επικοινωνία</a></li>
			</ul>
		</div>
	</nav>
	
	<div id="information">

	</div>
	
	<div id="download">
		
	</div>
	
	<div id="screenshots">
		
	</div>
	

	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('.nav li a').click(function(e) {
				$('.nav li').removeClass('active');
				var $parent = $(this).parent();
				if (!$parent.hasClass('active')) {
					$parent.addClass('active');
				}
			e.preventDefault();
			});
		});
	</script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

body{
	background-color: #e6e6e6;
	padding-top: 50px;
	margin: 0;
}

.navbar-default {
	border: none;
	-webkit-box-shadow: 0px 0px 5px 2px #595959;
		-moz-box-shadow: 0px 0px 5px 2px #595959;
			box-shadow: 0px 0px 5px 2px #595959;
	background-color: #0d1391;
}

.navbar-default .navbar-brand {
	color: #67e7f5;
}

.navbar-default .navbar-brand:hover {
	color: #ffffad;
}

.navbar-default .navbar-nav>li a,
.navbar-default .navbar-nav>li a:active {
	color: #ffffad;
}

.navbar-default .navbar-nav>li a:hover {
	background-color: #ffffad;
	color: #0d1931;
}

.navbar-default .navbar-nav>.active>a {
	background-color: #ffffad;
	color: #0d1931;
}

.navbar-default .navbar-nav>.active>a:hover {
	background-color: #67e7f5;
	color: #ffffad;
}

.navbar-default .navbar-nav>.dropdown>.dropdown-toggle a{
	color: #ffffad;
}

.navbar-default .navbar-nav>.open a{
	background-color: #ffffad;
	color: #0d1931;
}

.navbar-default .navbar-nav>.open a[aria-expanded="true"]{
	background-color: #ffffad;
	color: #0d1931;
}

.navbar-default .navbar-nav>.open a:hover{
	background-color: #67e7f5;
	color: #ffffad;
}

.dropdown-menu {
	background-color: #ffffad;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #ffffad;
	border-color: #ffffad;
}

.navbar-default .navbar-toggle:hover {
	background-color: #ffffad;
}

.navbar-default .navbar-toggle:hover .icon-bar {
	background-color: #0d1931;
	border-color: #0d1931;
}

Ξέρει κανείς τι μπορεί να παίζει;

AlexPc · 2 Μαρτίου 2016

λαθος κομμ

vadou · 2 Μαρτίου 2016

Αλλάζει background-color στο focus. Πάτα tab μερικές φορές και θα δεις ότι αλλάζουν όλα, όχι μόνο το active.

Ο λόγος;

.navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}
.navbar-nav > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
}

Τα έχει το bootstrap.min.css που φορτώνεις, λογικά.

dominotrix · 2 Μαρτίου 2016

Βρε συ.. Βαλτα σ'ενα codepen.io μη μας τυρρανας!

AlexPc · 2 Μαρτίου 2016

Δοκίμασε να κανεις την παραπνω αλλαγή στο head

rafinos · 2 Μαρτίου 2016

Αλλάζει background-color στο focus. Πάτα tab μερικές φορές και θα δεις ότι αλλάζουν όλα, όχι μόνο το active.

Ο λόγος;
.navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}
.navbar-nav > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
}
Τα έχει το bootstrap.min.css που φορτώνεις, λογικά.

Ωραία αυτό ισχύει.

Αλλά πως το αλλάζω; Δοκίμασα στο δικό μου css να αλλάξω σε τυχαία χρώματα και πάλι παρέμεναν ίδια.

Όπως είδες δεν έχω απευθείας παρέμβαση στο αρχείο του bootstrap καθώς το φορτώνω από το επίσημο λινκ που δίνει το site τους.

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/main.css" />

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>

Δοκίμασε να κανεις την παραπνω αλλαγή στο head

Αυτό είναι τελείως λάθος γιατί έτσι ότι css rules και να χρησιμοποιήσω εγώ αχρηστεύονται μόλις φορτωθεί το bootstrap που τρέχει μετά από το δικό μου.

Και ορίστε και σε code pen αφού σε παιδεύω.

http://codepen.io/rafail/pen/vGOONZ

dominotrix · 2 Μαρτίου 2016

Απλα κατεβασε το επισημο css αρχειο και αποθηκευσε το σε ενα φακελο με ονομα css και καλεσε αυτο αντι για το επισημο μεσα στο header. Ετσι θα μπορεις να κανεις αλλαγες στο αρχειο css και θα εμφανιζονται κανονικα.

rafinos · 2 Μαρτίου 2016

Ωραία!

Να ρωτήσω όμως.

Εγώ θα κατεβάσω το bootstrap και θα κρατήσω μόνο το αρχείο bootstrap.min.css (ή το bootstrap.css ανάλογα τη χρήση) και το Javascript αρχείο bootstrap.min.js (ή bootstrap.js) και τα υπόλοιπα τα σβήνω (δεν χρησιμοποιώ map files);

Ή απλά τα κρατάω όλα ως έχουν και κάνω include όποιο χρειάζομαι;

Τα ρωτάω αυτά γιατί μου αρέσει να έχω μόνο ότι αρχεία χρειάζομαι ώστε να τα έχω οργανωμένα με φακέλους κτλ. και δεν θέλω να έχω περίσσια αρχεία.

Επίσης τo φάκελο fonts τον κρατάω μόνο στην περίπτωση που χρειάζομαι κάποιο glyphicon;

rafinos · 2 Μαρτίου 2016

Παιδιά το παραπάνω θέμα το έλυσα. Κατέβασα το bootstrap και έβαλα σε σχόλια τα css rules που μου είπατε.

Τώρα κάτι άλλο. Όταν το width μικραίνει (από 767 και κάτω) μου βγάζει τις τρεις παύλες. Όταν πατάω πάνω όλα μια χαρά ανοίγει σε drop down list οι επιλογές μου. Όταν όμως πατάω στο "download" στη λίστα που ανοίγει δεν μπορώ να αλλάξω με τίποτα το hover (γίνεται μπλε σκούρο και μαύρο . Δείτε το στο code pen και θα καταλάβετε τι εννοώ.

Δοκίμασα αυτό το rule αλλά τίποτα:

@media (max-width:767px){.dropdown-menu>li>a:hover{ ... }
}

http://codepen.io/rafail/pen/vGOONZ

vadou · 2 Μαρτίου 2016

Δοκίμασε με αυτό

@media all and (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {

        /* Your rules 
           color: something;
           background-color: something;
       */

    }
}

rafinos · 2 Μαρτίου 2016

Ευχαριστώ πολύ!

Δουλεύει!

Απλά μπορείς να μου πεις τι ακριβώς κάνει το "all";

(Δουλεύει και χωρίς αυτό)

vadou · 2 Μαρτίου 2016

Του ορίζεις σε τι είδους οθόνη εφαρμόζει τα rules. Πχ θα μπορούσες να του πεις να βάλει κάποια rules μόνο για εκτυπωτές ή μόνο για handheld συσκευές κλπ

Για να δεις όλα τα είδη media : https://www.w3.org/TR/CSS21/media.html#media-types

Α, επίσης, επειδή παραπάνω ρωτούσες κάτι για το αν πρέπει να φορτώνεις όλο το bootstrap ή μόνο αυτά που χρειάζεσαι, αν πας στο http://getbootstrap.com/customize/ μπορείς να του ορίσεις εσύ τι θες και να σου φτιάξει τα αρχεία για να τα κατεβάσεις με μόνο αυτά που χρειάζεσαι. (Αν κατάλαβα δηλαδή σωστά την ερώτησή σου.. )

rafinos · 3 Μαρτίου 2016

Του ορίζεις σε τι είδους οθόνη εφαρμόζει τα rules. Πχ θα μπορούσες να του πεις να βάλει κάποια rules μόνο για εκτυπωτές ή μόνο για handheld συσκευές κλπ

Για να δεις όλα τα είδη media : https://www.w3.org/TR/CSS21/media.html#media-types

Α, επίσης, επειδή παραπάνω ρωτούσες κάτι για το αν πρέπει να φορτώνεις όλο το bootstrap ή μόνο αυτά που χρειάζεσαι, αν πας στο http://getbootstrap.com/customize/ μπορείς να του ορίσεις εσύ τι θες και να σου φτιάξει τα αρχεία για να τα κατεβάσεις με μόνο αυτά που χρειάζεσαι. (Αν κατάλαβα δηλαδή σωστά την ερώτησή σου.. )

Ευχαριστώ πάρα πολύ!

Απλά δεν ήθελα αυτό. Αυτό που ήθελα είναι να μην έχω παραπάνω αρχεία.

Ας πούμε να μην έχω και το bootstrap.css και το bootstrap.min.css και πάει λέγοντας. Εννοώ από τα 10 αρχεία που έχει τα χρειάζομαι και τα 10 ή κρατάω το 1 και κάνω τι δουλειά μου;

Δες λίγο την εικόνα. Εγώ από αυτά χρησιμοποιώ μόνο το .min άρα χρειάζομαι και τα υπόλοιπα ή τα σβήνω; Δηλαδή τα αρχεία εξαρτιούνται το ένα από το άλλο; Αυτό είναι που ρωτάω.

Επεξ/σία 3 Μαρτίου 2016 από rafinos

vadou · 3 Μαρτίου 2016

Τα boostrap.min.css και bootstrap-theme.min.css νομίζω τα χρειάζεσαι και τα 2. Τα μη-minified css μπορείς να τα χρησιμοποιήσεις για να βγάλεις - βάλεις πράγματα και να τα ξανακάνεις minify αντικαθιστώντας τα παλιά. Οπότε χρήσιμα και αυτά αλλά όχι απαραίτητα. Μπορείς να τα σβήσεις.

Τα map και αυτά χρήσιμα όταν θες να κάνεις debug / να βρεις που βρίσκεται κάποιο rule στο μη-minified css ώστε να το αλλάξεις, αλλά πάλι όχι απαραίτητα.

rafinos · 3 Μαρτίου 2016

Ωραία! Σε ευχαριστώ πολύ!

Σύνδεση

Θέμα με bootstrap

Προτεινόμενες αναρτήσεις

rafinos

AlexPc

vadou

dominotrix

AlexPc

rafinos

dominotrix

rafinos

rafinos

vadou

rafinos

vadou

rafinos

vadou

rafinos

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση