أول تطبيق عملي باستخدام إطار الـBootstrap


#1

هذه أول مرة استخدم الـbootstrap ولم أكن متوقعا سهولته!
هذه هي الصفحة التي صممتها سريعا:

والكود المستخدم:

<html>
    <head>
       <!-- Meta Rules -->
        <!-- The general displaying rule for characters -->
        <meta charset="utf-8">
        <!-- Ensuring that Internet Explorer (IE) will use the best engine for rendering elements -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- Enabling compitability for small screens -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Page title -->
        <title>Penguin Page</title>
        <!-- Ending Meta Rules -->
        <!-- Linking Section -->
        <!-- Page icon on the browser tab -->
        <link rel="shortcut icon" type="image/x-icon" href="http://via.placeholder.com/400x200">
        <!-- Styling CSS Section -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
        <!-- Ending linking Section -->
    </head>
    <body>
       <!-- Big container -->
        <div class="container">
           <!-- Header logo and titles -->
            <div class="row">
                <div class="col-md-6">
                    <img src="http://via.placeholder.com/100x100" alt="logo">
                </div>
                <div class="col-md-6 text-right text-uppercase">
                    <h1>Nasr Galal</h1>
                    <h4>Front-end Classic Design</h4>
                </div>
            <!-- Ending Header logo and titles -->
            <!-- Bottom Line -->
            <div class="row">
                    <div class="col-md-12">
                        <hr>
                    </div>
                </div>
            <!-- Cover Photo -->
            <div class="row">
                <div class="col-md-12">
                    <img class="img-responsive" src="http://via.placeholder.com/1200x350" alt="cover">
                </div>
            </div>
            </div>
            <!-- Header End -->
            <!-- Starting content -->
            <!-- Content Head -->
            <div class="row">
                <div class="col-md-12">
                    <h2>Featured Work</h2>
                </div>
            </div>
            <!-- Ending Content Head -->
            <!-- Row#1 Photos -->
            <div class="row">
                <div class="col-md-4">
                    <img class="img-responsive" src="http://via.placeholder.com/400x200" alt="pic1">
                    <h3>shot1</h3>
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="http://via.placeholder.com/400x200" alt="pic2">
                    <h3>shot2</h3>
                </div>
                <div class="col-md-4">
                    <img class="img-responsive" src="http://via.placeholder.com/400x200" alt="pic3">
                    <h3>shot3</h3>
                </div>
            </div>
            <!-- Row#2 Photos -->
            <div class="row">
                <div class="col-md-4">
                    <img src="http://via.placeholder.com/400x200" alt="pic4" class="img-responsive">
                    <h3>shot1</h3>
                </div>
                <div class="col-md-4">
                    <img src="http://via.placeholder.com/400x200" alt="pic5" class="img-responsive">
                    <h3>shot2</h3>
                </div>
                <div class="col-md-4">
                    <img src="http://via.placeholder.com/400x200" alt="pic6" class="img-responsive">
                    <h3>shot3</h3>
                </div>
            </div>
            <!-- Row#3 Photos -->
            <div class="row">
                <div class="col-md-4">
                    <img src="http://via.placeholder.com/400x200" alt="pic7" class="img-responsive">
                    <h3>shot1</h3>
                </div>
                <div class="col-md-4">
                    <img src="http://via.placeholder.com/400x200" alt="pic8" class="img-responsive">
                    <h3>shot2</h3>
                </div>
                <div class="col-md-4">
                    <img src="http://via.placeholder.com/400x200" alt="pic9" class="img-responsive">
                    <h3>shot3</h3>
                </div>
            </div>
            
        <!-- Ending Big container -->
        <footer class="row">
            <div class="col-md-12 text-center bg-warning">
                <h4>This is a test page!</h4>
            </div>
        </footer>
        </div>
    </body>
</html>

ماذا بعد ذلك؟
في انتظار ملاحظاتكم!


#2

حلو :blush:
هذا على السريع ؟
ماشاء الله :blush:


#3

اي نعم … أخذت مني فقط ربع ساعة :slight_smile:
بصراحة انا قضيت اليوم كله اقرأ في documentation للـBootstrap
لديهم امكانيات خرافية!


#4

رائع جدا
أنا اشتغلت قليلا على
WordPress
و
Elementor
أيضا جدا رائعين
و أود تعلم
Bootsrap
فيما بعد. لكن هل يجب ان ابدأ ب
Bootstrap 3
ثم 4 ؟؟


#5

سأجربهم!
انا تعلمت الاصدار الأخير فقط من bootstrap


#6

هذا الفيديو الذي تعلمت منه
WordPress && Elementor
يمكنك متابعته متى أردت رائع جدا


#7

الله :heart:
شكرا …