إنشاء موضوع: "الفرقة"
هذه الصفحة سوف تظهر لك كيفية بناء موضوع التمهيد من الصفر.
سنبدأ مع صفحة HTML بسيطة، ومن ثم إضافة المزيد والمزيد من العناصر، حتى يكون لدينا موقع على شبكة الانترنت تعمل بكامل طاقتها، والشخصية واستجابة.
فإن النتيجة تبدو هذه، وأنت حر لتعديل، حفظ، حصة، استخدام أو تفعل ما تريد مع ذلك:
HTML صفحة البداية
سنبدأ مع صفحة HTML التالية:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>إضافة التمهيد كندي وإضافة حاوية
إضافة التمهيد كندي وتصل إلى مسج ووضع عناصر HTML داخل حاوية ( .container ):
مثال
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</title>
<meta charset="utf-8">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>نتيجة:
الفرقة
نحن نحب الموسيقى!
قمنا بإنشاء موقع الفرقة خيالية. أبجد هوز ..
نص المركز
إضافة .text-center فئة لتوسيط النص داخل الحاوية، واستخدام <em> عنصر لجعل "نحن نحب الموسيقى" مائل النص:
مثال
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>نتيجة:
الفرقة
نحن نحب الموسيقى!
قمنا بإنشاء موقع الفرقة خيالية. أبجد هوز ..
إضافة الحشو
استخدام CSS لجعل الحاوية تبدو جيدة مع الحشو:
مثال
.container {
padding: 80px 120px;
}نتيجة:
الفرقة
نحن نحب الموسيقى!
قمنا بإنشاء موقع الفرقة خيالية. أبجد هوز ..
إضافة الشبكة
إنشاء ثلاثة أعمدة متساوية العرض ( .col-sm-4 )، إضافة النصوص والصور، ووضعها داخل الحاوية:
مثال
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We
love music!</em></p>
<p>We have created a fictional band website.
Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>نتيجة:
الفرقة
نحن نحب الموسيقى!
قمنا بإنشاء موقع الفرقة خيالية. أبجد هوز ..
اسم
اسم
اسم
دائرة صورة
تشكيل الصورة لدائرة مع .img-circle الدرجة.
واضاف لدينا أيضا بعض CSS لجعل الصور تبدو جيدة:
مثال
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
نتيجة:
اسم
اسم
اسم
Collapsibles
جعل الصور للطي. عرض المحتوى الإضافي عند النقر على كل صورة:
مثال
<div class="row">
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo"
class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long
walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle
person" alt="Random Name">
</a>
<div id="demo2"
class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member
since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo3"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo3"
class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member
since 2005</p>
</div>
</div>
</div>نتيجة (انقر على الصور لرؤية التأثير):
اسم
عازف الجيتار والمطرب الرصاص
يحب يسير لمسافات طويلة على الشاطئ
عضو منذ عام 1988
اسم
طبال
يحب drummin "
عضو منذ عام 1988
اسم
لاعب باس
يحب الرياضيات
عضو منذ عام 2005
إضافة كاروسيل
إنشاء دائري وإضافته قبل الحاوية:
مثال
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div
class="item">
<img src="chicago.jpg"
alt="Chicago">
<div
class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div
class="item">
<img src="la.jpg"
alt="Los Angeles">
<div
class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!--
Left and right controls -->
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>نتيجة:
نيويورك
الجو في نيويورك هو أبجد هوز.
شيكاغو
شكرا لك، شيكاغو - ألف ليلة لن ننسى.
LA
على الرغم من أن حركة المرور كانت في حالة من الفوضى، كان لدينا أفضل وقت اللعب في شاطئ فينيسيا!
نمط دائري
استخدام CSS أسلوب دائري:
مثال
.carousel-inner img {
-webkit-filter:
grayscale(90%);
filter: grayscale(90%); /* make all photos black and
white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media
(max-width: 600px) {
.carousel-caption {
display: none; /* Hide the
carousel text when the screen is less than 600 pixels wide */
}
}نتيجة:
نيويورك
الجو في نيويورك هو أبجد هوز.
شيكاغو
شكرا لك، شيكاغو - ألف ليلة لن ننسى.
LA
على الرغم من أن حركة المرور كانت في حالة من الفوضى، كان لدينا أفضل وقت اللعب في شاطئ فينيسيا!
إضافة جولة الحاويات
إضافة حاويات جديدة وإضافة قائمة ( .list-group و .list-group-item ) داخل منه.
إضافة فئة مخصصة ( .bg-1 ) إلى الحاوية (اللون الأسود الخلفية) وبعض الأنماط لأبنائها:
مثال
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style:
italic;}
</style>
<div class="bg-1">
<div
class="container">
<h3 class="text-center">TOUR
DATES</h3>
<p class="text-center">Lorem ipsum we'll
play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li
class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
نتيجة:
جولة التواريخ
أبجد هوز نحن سوف تلعب لبعض الموسيقى.
تذكر لحجز التذاكر الخاصة بك!
- سبتمبر مباع!
- أكتوبر مباع!
- 3 نوفمبر
إضافة تسميات والشارات
إضافة تسمية ( .label ) وشارة ( .badge ) لتسليط الضوء على التذاكر المتاحة / بيعت:
مثال
<ul class="list-group">
<li class="list-group-item">September
<span class="label label-danger">Sold Out!</span></li>
<li
class="list-group-item">October <span class="label label-danger">Sold
Out!</span></li>
<li class="list-group-item">November <span
class="badge">3</span></li>
</ul>نتيجة:
جولة التواريخ
أبجد هوز نحن سوف تلعب لبعض الموسيقى.
تذكر لحجز التذاكر الخاصة بك!
- سبتمبر مباع!
- أكتوبر مباع!
- 3 نوفمبر
إضافة صور مصغرة
داخل الحاوية للجولات، إضافة ثلاثة أعمدة متساوية العرض ( .col-sm-4 ):
داخل كل عمود، إضافة صورة.
ثم، استخدم .img-thumbnail فئة لتشكيل صورة إلى صورة مصغرة.
عادة، إضافة .img-thumbnail الطبقة مباشرة إلى <img> العنصر. في هذا المثال، وضعنا وعاء مصغرة حول الصورة، حتى نتمكن من تحديد النص صورة أيضا.
مثال
<div class="row text-center">
<div class="col-sm-4">
<div
class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button
class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New
York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg"
alt="San Francisco">
<p><strong>San
Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>نتيجة:
باريس
جمعة 27 نوفمبر 2015
نيويورك
السبت 28 نوفمبر 2015
سان فرانسيسكو
شمس. 29 نوفمبر 2015
قوائم الأسلوب، الصور المصغرة للصور وأزرار
استخدام CSS أسلوب القائمة والصور المصغرة. في مثالنا، قمنا بإزالة الحدود مقربة من القائمة، ولقد حاولت أن تجعل الصور المصغرة مثل بطاقات، عن طريق إزالة الحدود بين البلدين، ووضع العرض بنسبة 100٪ على كل صورة.
لقد قمنا بتعديل أيضا الأنماط الافتراضية من التمهيد ل .btn الطبقة، إلى زر الأسود:
مثال
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding
to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On
hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}نتيجة:
- سبتمبر مباع!
- أكتوبر مباع!
- 3 نوفمبر
باريس
جمعة 27 نوفمبر 2015
نيويورك
السبت 28 نوفمبر 2015
سان فرانسيسكو
شمس. 29 نوفمبر 2015
إضافة مشروط
أولا، تغيير كل الأزرار داخل الصورة المصغرة من <button class="btn">Buy Tickets</button> إلى <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . وتستخدم هذه الأزرار لفتح مشروط الفعلي.
لإنشاء مشروط، والنظر في التعليمة البرمجية التالية:
مثال
<style>
/* Add a dark gray background color to the modal header and
center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy
Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4><span class="glyphicon
glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div
class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>
Tickets, $23 per person</label>
<input type="number" class="form-control"
id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send
To</label>
<input type="text" class="form-control" id="usrname"
placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger
btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>نتيجة (انقر على زر "شراء تذاكر" لمعرفة التأثير):
إضافة جهة اتصال الحاويات
إنشاء حاوية جديدة، مع اثنين من الأعمدة غير متساوية العرض ( .col-md-4 و .col-md-8 ).
إضافة الرموز الإعلامية مع النص داخل الأولى ضوابط العمود وشكل في الثانية:
مثال
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a
note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago,
US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00
1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email:
[email protected]</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input
class="form-control" id="name" name="name" placeholder="Name" type="text"
required>
</div>
<div class="col-sm-6 form-group">
<input
class="form-control" id="email" name="email" placeholder="Email"
type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea>
<div class="row">
<div
class="col-md-12 form-group">
<button class="btn
pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>نتيجة:
اتصال
نحن نحب جماهيرنا!
مروحة؟ إسقاط المذكرة.
شيكاغو، الولايات المتحدة
الهاتف: +00 1515151515
البريد الإلكتروني: [email protected]
إضافة Toggable علامات التبويب
إضافة علامات التبويب ( .nav nav-tabs ) داخل الحاوية اتصال مع "يقتبس" من أعضاء الفرقة:
مثال
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a
data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div
class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem
ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure
people! Hope you enjoyed it as much as I did. Could I BE.. any more
pleased?</p>
</div>
<div id="menu2" class="tab-pane
fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other
things.</p>
</div>
</div>نتيجة:
من مدونة
مايك روس، المدير
رجل، كنا على الطريق لبعض الوقت الآن. نتطلع إلى أبجد هوز.
خرائط جوجل
إضافة خرائط جوجل (لمزيد من المعلومات، يرجى الاطلاع على خرائط جوجل Tutoria لتر).
استخدام CSS لضبط العرض والطول واللون من الخريطة:
مثال
<style>
#googleMap {
width:
100%; /* Span the entire width of the screen */
height: 400px;
/* Set the height to 400 pixels */
-webkit-filter:
grayscale(100%);
filter: grayscale(100%); /* Change
the color of the map to black and white * /
}
</style>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var
marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>نتيجة:
انها محاولة لنفسك »إضافة نافبار
إضافة نافبار في الجزء العلوي من الصفحة التي تنهار على شاشات أصغر حجما:
مثال
<nav class="navbar navbar-default navbar-fixed-top">
<div
class="container-fluid">
<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" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">MORE
<span class="caret"></span>
</a>
<ul
class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a
href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
نتيجة:
انها محاولة لنفسك » | نصيحة: بزر الماوس الأيمن محاذاة ارتباطات التنقل مع navbar-right الطبقة. إذا كنت تريد واحدة من الروابط في الناف بار تتصرف مثل القائمة المنسدلة، استخدم .dropdown الطبقة |
|---|
إن أسلوب نافبار
استخدام CSS لتخصيص شريط التنقل:
مثال
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn
white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c
!important;
}
/* Remove border color from the collapsible button
*/
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff
;
background-color: #555 !important;
}
/*
Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}نتيجة:
انها محاولة لنفسك »إضافة Scrollspy
إضافة scrollspy تحديث الارتباطات نافبار تلقائيا عند التمرير:
مثال
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour"
class="container">
<div id="contact" class="container"> انها محاولة لنفسك » إضافة تذييل
1. إنشاء <footer> عنصر وإضافة بعض النصوص.
2. استخدام CSS أسلوب تذييل.
3. إضافة "سهم لأعلى" رمز، والتي سوف تأخذ المستخدم إلى أعلى الصفحة عند النقر على.
4. استخدام مسج لتهيئة المساعد تلميح الأدوات:
مثال
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color:
#f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer
a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip"
title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="http://www.w3ii.com"
data-toggle="tooltip" title="Visit w3ii">www.w3ii.com</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>نتيجة:
انها محاولة لنفسك »مضيفا التمرير السلس
استخدام مسج لإضافة التمرير السلس (عند النقر على الروابط في الناف بار):
مثال
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> انها محاولة لنفسك » اللمسة الأخيرة
إضفاء الطابع الشخصي على الموضوع الخاص بك عن طريق إضافة الخط الذي تريد. وقد استخدمنا "مونتسيرات" و "لاتو" من مكتبة الخط جوجل.
تصل إلى الخط في <head> القسم:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
ثم يمكنك استخدامها في الصفحة:
مثال
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family:
Montserrat, sans-serif;
}واضاف لدينا أيضا بعض أسلوب اضافية لبعض العناصر:
مثال
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
} انها محاولة لنفسك »