• 0

كيف أجعل بوتستراب يدعم اللغة العربية؟

أريد أن أنشئ موقع عربي باستخدام بوتستراب، فكيف أجعل بوتستراب يدعم اللغة العريبة؟ أي من حيث دعم اتجاه اللغة وغيرها...

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

توجد عدّة مشاريع لدعم اللغة العريبة لمشروع بوتستراب من أشهرها هذا المشروع، لكن بالنسبة لي وللكثير من المبرمجين، فأنا أفضل أن أعدّل بنفسي على الموقع لجعله يدعم العربية مثلا عن طريق وضع هذا السطر:

<html lang="ar">

واستخدام خط درويد نسخ للموقع:

  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/droid-arabic-naskh" type="text/css"/> 

ومن ثم اجعل اتجاه النص من اليمين لليسار و أعدل على تنسيق CSS لجعله يستخدم الخط السابق:

body {
	font-family: 'DroidArabicNaskhRegular';
    font-weight: normal;
    font-style: normal; 
	direction: rtl;
}

هذه بعض الأشياء البسيطة التي أقوم بها لدعم اللغة العربية في مشروع بوتستراب.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

من المستحسن استعمل المكتبة التي ذكرها الاخ هشام وهي مكتبة Bootstrap RTL حيث توفر عليك الجهد والعمل وتقوم بتعديل كل التنسيقات مثل float,direction,text-align.

وبالتالي سيكون كود html هكذا:

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta http-equiv="Content-Language" content="ar">
        <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
        <!--IE Compatibility Meta-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--Mobile Meta-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <!-- Bootstrap RTL -->
        <link rel="stylesheet" href="http://cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css">
        <!--ِ ِCustom CSS -->
        <link rel="stylesheet" href="style.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <title>Title_Here</title>
        <link rel="icon" type="image/x-icon" href="Icon_url_here" />
    </head>
    <body>
        <!-- Content Here -->
    </body>
</html>

وغالبا ما استعمل هذا الكود في بداية كل مشروع عربي.

ومن ثم قم بتغيير نوعية الخط الى خط خاص باللغة العربية من خلال ملف css:

@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);

body {
 font-family: 'Amiri', serif; 
}

المزيد من الخطوط العربية

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن