CSS – فریم‌ورک‌های واکنش‌گرا (RWD Frameworks)

فریم‌ورک‌های CSS متعددی وجود دارند که طراحی واکنش‌گرا را ارائه می‌دهند. در اینجا به دو فریم‌ورک محبوب به نام‌های W3.CSS و Bootstrap می‌پردازیم.

استفاده از W3.CSS

یک راه عالی برای ایجاد طراحی واکنش‌گرا، استفاده از یک برگه سبک واکنش‌گرا مانند W3.CSS است. این فریم‌ورک به شما کمک می‌کند تا سایت‌هایی طراحی کنید که در هر اندازه‌ای زیبا به نظر برسند!

دموی W3.CSS

صفحه را تغییر اندازه دهید تا واکنش‌گرایی آن را ببینید!

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container w3-blue">
    <h1>W3Schools Demo</h1>
    <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
    <div class="w3-third">
        <h2>London</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="w3-third">
        <h2>Paris</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>

    <div class="w3-third">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>
</div>

</body>
</html>

Bootstrap

یکی دیگر از فریم‌ورک‌های محبوب، Bootstrap است که از HTML و CSS برای ایجاد صفحات وب واکنش‌گرا استفاده می‌کند.

مثال Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
            <h3>Column 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
            <h3>Column 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
            <h3>Column 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
    </div>
</div>

</body>
</html>

با استفاده از این فریم‌ورک‌ها، می‌توانید صفحات وبی طراحی کنید که به خوبی در اندازه‌های مختلف صفحه نمایش کار کنند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.