/Twitter Bootstrap Tutorial – Scaffolding II

Twitter Bootstrap Tutorial – Scaffolding II

بدأنا المره اللي فاتت في ال scaffolding وها نحن في هذه المرة نكمل ما بدأناه وهنخلصه في المقال ده بإذن الله

Fluid Grid System

اتكلمنا عن ال Grid System وازاي استخدمه وشفنا مثال عليه

زييه بالظبط ال Fluid grid system ، بس بدل ما كانت العواميد عدد ثابت من ال pixels هتكون هنا نسبه (precents) بحيث تتكيف مقاساتها مع المقاس و ال resolution اللي هتتعرض عليه

وهنا بدل ما كنت بانسب ال div لل class = “row” ، هتبقى row-fluid وبقسم جواها ال spans عادي خالص ، وباستخدم برضه ال offset زي في ال grid system العادي تماما

Nesting Columns

كل اللي هنعمله اننا بنضيف row جديد وبحط جواه عدد معين م ال spans وجوا كل span بيكون جواها spans تانيه وهكذا
فمثلا على نفس ال project اللي عملناه المره اللي فاتت هنكتب في index.html الكود التالي

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CatazineLive | Bootstrap</title>
		<link charset="utf-8" type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
		<link charset="utf-8" type="text/css" href="css/main.css" rel="stylesheet">
	</head>
	<body>
		<div class="row">
			<div class="span9 block">
				Level 1 column
				<div class="row">
					<div class="span6 block2">
						Level 2
					</div>
					<div class="span3 block2">
						Level 2
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

وفي ال main.css “برضه هنا انا معملتش غير اني ادتهم الوان فقط لا اكثر”

.row {
	background: #0E90D2;
	height: 120px;
}

.block {
	background: #fff;
}

.block2 {
	background: #666;	
}

 نفس الكلام هيكون في ال fluid nesting بس بما انها بتعتمد على النسبة فانا لازم اعرفه ايه هو ال 100% علشان يبتدي يحسب على اساسه

فقبل ال row-fluid الاساسيه لازم احطها في span12 الاول ، وهنجرب برضه مثال عليها :

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CatazineLive | Bootstrap</title>
		<link charset="utf-8" type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
		<link charset="utf-8" type="text/css" href="css/main.css" rel="stylesheet">
	</head>
	<body>
		<div class="row-fluid">
			<div class="span12 block">
				Fluid 12
				<div class="row-fluid">
					<div class="span6 block2">
						Fluid 6
						<div class="row-fluid">
							<div class="span6 block3">
								Fluid 6
							</div>
							<div class="span6 block3">
								Fluid 6
							</div>
						</div>
					</div>
					<div class="span6 block2">
						Fluid 6
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

main.css

.row-fluid {
	background: #0E90D2;
	height: 120px;
}

.block {
	background: #fff;
}

.block2 {
	background: #666;	
}

.block3 {
	background: #7ABA7B ;
}

ملحوظه : ممكن بعد ما تعمل run لكود ال fluid ده ، جرب تصغر ال window بتاع البراوزر وجرب بالماوس تصغرها وتكبرها وترفعها … ايا ما عملت هتلاقي ال blocks زي ما هي وبتصغر وتكبر على حسب المقاس اللي بتعمله ، على عكس ال grid العادي هتلاقي في حاجات بتختفي

Layout

اني اعمل layout بابعاد ثابته بحيث اقدر ارص جواها ال rows,spans,… فقط باستدعي ال class=”container” في ال div الاساسيه ، او container-fluid لو عايز ال layout بعامودين

Scaffolding · Bootstrap - Chromium_001

Responsive design

الى الان كنا بنستخدم ال css/bootstrap.min.css لكن زي ما قلنا في فايل تاني اسمه bootstrap-responsive.css او bootstrap-responsive.min.css

ده بقى قمة ال flexibility والتحكم في ال grids وكل حاجه 😀

بدل ما اعمل كذا version لل App واحد لاجهزة الكمبيوتر وواحد للموبايلات وواحد للتابليت وكل نوع من دول ممكن يكون جواه انواع مختلفه عن بعضها ، بستخدم ال responsive design

 فمثلا على سبيل المثال لحاجه ممكن اعملها بيه وليس الحصر ،لو عنصر معين مثلا بديله class > hidden-phone ، فكده العنصر هيكون موجود لو فتحت من اي جهاز غير الموبايل وهكذا

مثلا موقع زي lookout.com مثلا مثلا ، افتحه من على جهاز الكمبيوتر وبعدين افتحه من ع الموبايل ، هتلاقي حاجات كتير جدا مش موجوده في ال version اللي ع الموبايل ، وعمل الموضوع ده باستخدام ال responsive design

مش هنعرف ندي لل responsive design هنا حجمه اوي ممكن لانه عايز تركيز وعميق شويه، ممكن نبقى نفكر نتكلم عنه بشكل اعمق شويه في مقال لوحده بإذن الله

المرة الجايه هنتكلم عن ال section بتاع ال Base CSS وهو خفيف وسهل ان شاء الله

اتمنى مكنش طولت اوي … تحياتي 🙂

Faculty of Engineering, Computer and Control Systems Department, Mansoura University - 2014