Σχετικά με Bootstrap/Responsive Design

kaliakman · 11 Φεβρουαρίου 2017

Καλησπέρα,

Είναι η πρώτη φορα που ασχολούμαι με κάτι τέτοιο και ακομά προσπαθώ να καταλάβω τι γίνεται!

Έχουμε τον εξής κώδικα HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <title>Random Site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel = "stylesheet"  type="text/css" href = "style.css"></link>
  <script src="https://use.fontawesome.com/df0843c127.js"></script>
</head>

<body>
	<div class = container id = "category" style="width:900px">
		<h4>Categories</h4>
		<hr>
	</div>
	<div class="container";" id = "content">
		<div style="font-weight: bold;font-size: 15px;">Fruits</div>
		<ul class = "listMult" style="list-style: none">
			<li>Orange</li>
			<li>Apple</li>
			<li>Banana</li>
			<li>Something</li>
			<li>Something else</li>
		</ul>
		<div style="font-weight: bold;font-size: 15px;">Vegetables</div>
		<ul class = "listMult" style="list-style: none">
			<li>Tomato</li>
			<li>Potato</li>
			<li>foo</li>
			<li>fa</li>
			<li>fe</li>
		</ul>
		<div style="font-weight: bold;font-size: 15px;">Meals</div>
		<ul class = "listMult" style="list-style: none">
			<li>Steak</li>
			<li>Pea</li>
			<li>Pizza</li>
		</ul>
	</div>
	<div class = container id = "category" style="width:900px">
		<h4>Something</h4>
		<hr>
	</div>
	<div class="container" id = "content">
		<div style="font-size: 18px">SomethingMore</div>
		<div style="font-size: 18px;padding-left: 10px;font-weight:bold;">SomeDescription</div>
		<a href="#" style="padding-left: 10px;">Some site</a>
	</div>
</body>
</html>

και το CSS:

.listMult{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3;

	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
	-moz-column-gap: 40px; /* Firefox */
	column-gap: 10px;
}

li{
	padding: 0px;
	margin: 0px;
}

#content{
	margin: auto;
	width: 840px;
	font-family: "Droid Sans", Helvetica, Verdana, sans-serif;

}

#category{
	padding-top: 60px;
	padding-bottom: 0px;
}


.navbar{
	margin-bottom: 0;
	border-radius: 0;
}

Έχω βάλει και ένα navbar του bootstrap σαν header.

Το θέμα είναι ότι το navbar είναι κανονικά responsive αλλά δεν μπορώ να καταφέρω αυτό το κομμάτι που έβαλα να αλληλεπιδρά με το μέγεθος της οθόνης.

Η ιδεά που σκέφτηκα είναι το grid του boostrap αλλά έτσι δεν έχω αυτό το "εφέ" με τις στήλες.

Επίσης ούτε η λίστα του boostrap μου κάνει γιατί έχει αυτές τις γραμμές που το κάνουν να φαίνεται σαν πίνακας.

Είμαι σίγουρος οτί είναι κάτι trivial αλλά δεν μπόρεσα να βρω κάτι,οπότε κάθε πρόταση καλοδεχούμενη!

vadou · 11 Φεβρουαρίου 2017

Μερικά σημεία που πρέπει να προσέξεις:

Inline css is a big no. Προσπάθησε να το αποφύγεις.
Τα id πρέπει να είναι μοναδικά και γενικά όπου μπορείς να τα αποφύγεις είναι καλύτερο να χρησιμοποιείς classes. Έχεις duplicate ids, οπότε διόρθωσέ τα.
Καλό είναι να ξέρεις γιατί χρησιμοποιείς το κάθε css rule. πχ: "margin: auto;" γιατί; μήπως χρειάζεσαι κάτι πιο συγκεκριμένο;
Στο παραπάνω κολλάνε και τα columns που έχεις βάλει στις λίστες. Δεν ξέρω τι θέλεις να πετύχεις, σίγουρα υπάρχει καλύτερος τρόπος, μιας και ο ρόλος των column είναι διαφορετικός.
Responsive design και καρφωτά width στα σημεία που τα έχεις βάλει δεν πάνε μαζί.
<div class="container";" id = "content"> <-- σου έχει ξεφύγει κάτι εκεί
Αντί για τα hr που έχεις βάλει, χωρίς να ξέρω ακριβώς το design που θες να δημιουργήσεις, είναι πολύ πιθανό να έκανες τη δουλειά σου καλύτερα με κάποιο border.

XPHSTOS_ · 11 Φεβρουαρίου 2017

Χρησιμοποίησε τις λίστες του bootstrap και μετά με css το φέρνεις στα μέτρα σου.
Θέλεις τα 3 "μενού" να είναι σε 3 κολώνες σωστά?

Πάντως από το design σαν να θέλεις πίνακα μου φαίνεται.
Εναλλακτικά, κράτα τα ul και παίξε με floats για να φέρεις έτσι.

kaliakman · 11 Φεβρουαρίου 2017

Μερικά σημεία που πρέπει να προσέξεις:

Inline css is a big no. Προσπάθησε να το αποφύγεις.

Τα id πρέπει να είναι μοναδικά και γενικά όπου μπορείς να τα αποφύγεις είναι καλύτερο να χρησιμοποιείς classes. Έχεις duplicate ids, οπότε διόρθωσέ τα.

Καλό είναι να ξέρεις γιατί χρησιμοποιείς το κάθε css rule. πχ: "margin: auto;" γιατί; μήπως χρειάζεσαι κάτι πιο συγκεκριμένο;

Στο παραπάνω κολλάνε και τα columns που έχεις βάλει στις λίστες. Δεν ξέρω τι θέλεις να πετύχεις, σίγουρα υπάρχει καλύτερος τρόπος, μιας και ο ρόλος των column είναι διαφορετικός.

Responsive design και καρφωτά width στα σημεία που τα έχεις βάλει δεν πάνε μαζί.

<div class="container";" id = "content"> <-- σου έχει ξεφύγει κάτι εκεί

Αντί για τα hr που έχεις βάλει, χωρίς να ξέρω ακριβώς το design που θες να δημιουργήσεις, είναι πολύ πιθανό να έκανες τη δουλειά σου καλύτερα με κάποιο border.

Well ήμουν σίγουρος οτί θα είχε πολλές "βλακείες" μιας και δεν έμαθα html/css αλλά μόλις ήθελα κάτι το έψαχνα και το έφτιαχνα.

ok!
Το content θα γίνει κλάση
Αν δεν κάνει λάθος το κάνει align στο center του πατέρα,σωστά;
Θέλω να έχω μια λίστα με n στοιχεία και απλά να τα κατανέμει σε 3 στήλες ομοιομόρφα και όχι να αναγκάζομαι για κάθε στοιχείο να γράφω επιπλέον πράγματα.
Εννοείς στο content σωστά? Ήθελα να είναι λίγο πιο μέσα από τον πατέρα αλλά αυτό λογικά γίνεται και με padding.
Ναι μου ξεφύγε στο edit που έκανα.
Απλά θέλω σαν διαχωριστικά για τις κατηγορίες και με βόλεψε το hr.

Χρησιμοποίησε τις λίστες του bootstrap και μετά με css το φέρνεις στα μέτρα σου.

Θέλεις τα 3 "μενού" να είναι σε 3 κολώνες σωστά?

Πάντως από το design σαν να θέλεις πίνακα μου φαίνεται.

Εναλλακτικά, κράτα τα ul και παίξε με floats για να φέρεις έτσι.

Οι λίστες του bootstrap δημιουργούν σαν grid και δεν ξέρω πως να το απενεργοποιήσω οπότε δεν μου κάνει. Αυτό με το ul και το float δεν το κατάλαβα αλλά θα το κοιτάξω.

Predatorkill · 11 Φεβρουαρίου 2017

Βγαλε απο το head οτι .js εχεις και βαλτα στο τελος του html. Η σελιδα θα γινεται πιο γρηγορα render καθως τα js αρχεια θα φορτωνουν τελευταια.

Επισης, συνηθως δε χρειαζεσαι το js απο το fontawesome παρα μονο το css.

XPHSTOS_ · 11 Φεβρουαρίου 2017

Well ήμουν σίγουρος οτί θα είχε πολλές "βλακείες" μιας και δεν έμαθα html/css αλλά μόλις ήθελα κάτι το έψαχνα και το έφτιαχνα.

ok!

Το content θα γίνει κλάση

Αν δεν κάνει λάθος το κάνει align στο center του πατέρα,σωστά;

Θέλω να έχω μια λίστα με n στοιχεία και απλά να τα κατανέμει σε 3 στήλες ομοιομόρφα και όχι να αναγκάζομαι για κάθε στοιχείο να γράφω επιπλέον πράγματα.

Εννοείς στο content σωστά? Ήθελα να είναι λίγο πιο μέσα από τον πατέρα αλλά αυτό λογικά γίνεται και με padding.

Ναι μου ξεφύγε στο edit που έκανα.

Απλά θέλω σαν διαχωριστικά για τις κατηγορίες και με βόλεψε το hr.

Οι λίστες του bootstrap δημιουργούν σαν grid και δεν ξέρω πως να το απενεργοποιήσω οπότε δεν μου κάνει. Αυτό με το ul και το float δεν το κατάλαβα αλλά θα το κοιτάξω.

Αν δεν χρησιμοποιήσεις τα row και τα columns από το bootstrap τότε γιατί το βάζεις?

(Αν σε μπερδεύει το CSS πάτα το βελάκι προς τα κάτω, στα δεξιά από τα CSS, και δες την compiled version)

http://codepen.io/xphstos/pen/QdJBZG?editors=0100

Επεξ/σία 12 Φεβρουαρίου 2017 από XPHSTOS_

dominotrix · 11 Φεβρουαρίου 2017

Δε ξερω τι θελεις να πετυχεις, αλλα διαβασε για το display:flex; και γενικα για το flex θα σε βοηθησει.

Σύνδεση

Σχετικά με Bootstrap/Responsive Design

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

kaliakman

vadou

XPHSTOS_

kaliakman

Predatorkill

XPHSTOS_

dominotrix

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

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

Σύνδεση

Σύνδεση