ماذا اضيف من ملفات بوتستراب لمشروعي؟

ابو تركي_2020 · 2 أغسطس 2020

اعمل على بيئة التطوير visual studio asp.net core

واريد ان اضمن ملفات bootstrap للمشروع

فأي الملفات اختار ؟

مرفق المجلد

bootstrap-4.2.1-rtl.zip

عزام عبد الحافظ · 2 أغسطس 2020

مرحبًا @ابو تركي_2020,

يجب عليك أن تستخدم الملفات داخل مجلد dist فيه توجد الملفات الجاهزة للتوزيع و الإستخدام ,

داخل مجلد js توجد ملفات جافا سكريبت يمكنك إستخدام bootstrap.js او ملف مضغوط bootstrap.min.js يحمل مساحة أقل .

أما ملفات التنسيقات هي داخل مجلد css الملف bootstrap.min.css , و داخل مجلد rtl يوجد التنسيقات التي تدعم اللغة العربية (من اليمين إلى اليسار).

ابو تركي_2020 · 2 أغسطس 2020

بتاريخ 2 ساعات قال عزام عبد الحافظ:

مرحبًا @ابو تركي_2020,

يجب عليك أن تستخدم الملفات داخل مجلد dist فيه توجد الملفات الجاهزة للتوزيع و الإستخدام ,

داخل مجلد js توجد ملفات جافا سكريبت يمكنك إستخدام bootstrap.js او ملف مضغوط bootstrap.min.js يحمل مساحة أقل .

أما ملفات التنسيقات هي داخل مجلد css الملف bootstrap.min.css , و داخل مجلد rtl يوجد التنسيقات التي تدعم اللغة العربية (من اليمين إلى اليسار).

وملفات jquery أين أجدها وكيف أقوم بتضمينها؟

محمد ربيع زليول · 2 أغسطس 2020

بتاريخ 6 ساعات قال ابو تركي_2020:

وملفات jquery أين أجدها وكيف أقوم بتضمينها؟

لا يتضمن مجلد boostrap المضغوط مكتبتي jQuery و Popper.js.

بالنسبة لملف jquery يمكنك تحميله من الموقع الرسمي لjquery.

كذالك بالنسبق لملف مكتبة Popper.js.

أقترح عليك طريقة مغايرة للتحميل، أولًا قم بالدخول إلى موقع Bootstrap.

توجه للجزء المخصص ل BootstrapCDN أسفل الصفحة، ستجد الأكواد التالية:

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

قم بأخد الروابط من هذه العناصر، بالشكل التالي:

https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

https://code.jquery.com/jquery-3.5.1.slim.min.js

https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js

https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js

ثم في نافدة المتصفح قم بالدخول إلى هذه الروابط رابط برابط، ثم قم بتحميل الملف عن طريق الضغط بالزر الأيمن وإختيار خيار save as ...

ثم قم بعدها بوضع هذه الملفات بمشروعك، ضغ ملفات css داخل مجلد css وملفات .js داخل مجلد js.

Yomna Raouf · 2 أغسطس 2020

يوجد عدة طرق يمكن من خلالها إضافة Bootstrap لمشروعك:

يمكنك إختيار ال default starter template من أجل ASP.net core فهو يتضمن bootstrap مُنزَّل مسبقًا
الطريقة الموصى بها لإضافة bootstrap إلى مشروع ASP.NET CORE هو إضافتها إلى bower.json ك dependency

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.6",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

يمكنك تنفيذ ذلك بالطريقة التالية:

BOWER 

bower install bootstrap

إذا كنت تريد الإشارة إلى ملفات bootstrap من النسخة التي قمت بتحميلها فإنك تحتاج إلى أن أن تشير إليها في أي صفحة يتم فيعا إستخدام bootstrap. في بيئة الإنتاج يجب أن تشير إلى bootstrap ك CDN في ال default ASP.NET site template. ليصبح ملف _Layout.cshtml كما يلي.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2016 - WebApplication1</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
</body>
</html>

بتاريخ 16 ساعات قال ابو تركي_2020:

وملفات jquery أين أجدها وكيف أقوم بتضمينها؟

ملفات bootstrap لا تتضمن jqyery.js و popper.js لإضافتها يجب إستخدام السطرين التاليين قبل ال Script الخاص بملف bootstrap.js

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

ايمن طها · 28 فبراير 2021

بتاريخ On 2‏/8‏/2020 at 02:58 قال عزام عبد الحافظ:

مرحبًا @ابو تركي_2020,

يجب عليك أن تستخدم الملفات داخل مجلد dist فيه توجد الملفات الجاهزة للتوزيع و الإستخدام ,

داخل مجلد js توجد ملفات جافا سكريبت يمكنك إستخدام bootstrap.js او ملف مضغوط bootstrap.min.js يحمل مساحة أقل .

أما ملفات التنسيقات هي داخل مجلد css الملف bootstrap.min.css , و داخل مجلد rtl يوجد التنسيقات التي تدعم اللغة العربية (من اليمين إلى اليسار).

السلام عليكم ورحمة الله وبركاته

انا دلوقتي عدلت في ملف bootstrap.css ,والتعديل لم يتم ويوجد ايضا ملف اخر اسمه bootstrab.min.css اللي هو المضغوط اعمل ايه دلوقتي لو حبيت اغير لون مثلا

بغير في الملف الاول التعديل مش بيظهر الملف التاني مضغوط ومش عارف ازي بيتم اللتعديل عليه مستي ردك

ماذا اضيف من ملفات بوتستراب لمشروعي؟

السؤال

ابو تركي_2020

رابط هذا التعليق

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

5 أجوبة على هذا السؤال

Recommended Posts

عزام عبد الحافظ

رابط هذا التعليق

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

ابو تركي_2020

رابط هذا التعليق

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

محمد ربيع زليول

رابط هذا التعليق

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

Yomna Raouf

رابط هذا التعليق

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

ايمن طها

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية