36 lines
2.7 KiB
Markdown
36 lines
2.7 KiB
Markdown
|
---
|
||
|
|
title: Get Started
|
||
|
|
localeTitle: البدء
|
||
|
|
---
|
||
|
|
## البدء
|
||
|
|
|
||
|
|
Bootstrap هو إطار مجاني ومفتوح المصدر تم تطويره بواسطة Twitter ، ويوفر مجموعة متنوعة من القوالب للاستخدام مع تطوير الواجهة الأمامية. يجعل استخدام Bootstrap من السهل تصميم موقع ويب متجاوب تمامًا وهو إطار يستحق التعلم.
|
||
|
|
|
||
|
|
#### ما هو موقع الويب المتجاوب
|
||
|
|
|
||
|
|
موقع الويب المتجاوب هو موقع ويب يقوم بتغيير حجم وإعادة ترتيب تلك العناصر على الصفحة بناءً على حجم متصفحك. باستخدام موقع ويب متجاوب إذا كنت تغير حجم متصفحك ، يمكنك مشاهدة التغييرات تحدث في الوقت الفعلي. Bootstrap يجعل موقعك يستجيب لك.
|
||
|
|
|
||
|
|
#### كيف أقوم بإضافة Bootstrap إلى صفحتي
|
||
|
|
|
||
|
|
تعد إضافة bootstrap إلى صفحتك عملية سريعة ، فما عليك سوى إضافة ما يلي إلى `<head>` العلامات في شفرتك.
|
||
|
|
|
||
|
|
`
|
||
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||
|
|
`
|
||
|
|
|
||
|
|
سوف تحتاج أيضا إلى إضافة ما يلي بين `body` العلامات في التعليمات البرمجية. باستخدام Bootstrap ، ستستخدم علامات `<div>` عند استخدام العديد من ميزات Bootstrap ، وستحتوي كل علامة على مجموعة فريدة من الفئات المطبقة التي تسمح للعلامة بتنفيذ مهمتها. ستعرض الأقسام الأخرى من دليل Bootstrap هذا المزيد من الأمثلة عن كيفية استخدام Bootstrap `<div>` . (العلامات `<div>` ليست حصرية لـ Bootstrap ، ومع ذلك فإن Bootstrap تستفيد منها.). وفيما يلي التعليمات البرمجية التي سوف شأنه أن يضيف إلى `body` العلامات في التعليمات البرمجية لإنهاء بدء العمل. ضع في اعتبارك أنه أثناء إنشاء الحاوية ، ستظل الصفحة فارغة حتى تضيف محتوى إلى الحاوية.
|
||
|
|
|
||
|
|
`
|
||
|
|
<div class="alert alert-success" role="alert">
|
||
|
|
<strong>Congratulations!</strong>
|
||
|
|
<p>Bootstrap is now working on this page</p>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
|
||
|
|
**تهانينا!**
|
||
|
|
|
||
|
|
يعمل Bootstrap الآن على هذه الصفحة
|
||
|
|
|
||
|
|
#### معلومات اكثر
|
||
|
|
|
||
|
|
* [موقع Bootstrap الرسمي](http://getbootstrap.com/getting-started/)
|