ساخت پنل واکنشگرا
من یک پنل هستم.
من یک پنل هستم .
من یک container هستم.
من یک container هستم.
کلاس پنل
کلاس margin ،w3-panel برابر 16px از بالا و پایین و padding برابر 16px از چپ و راست به عنصر می افزاید.
استفاده از پنل ها برای نمایش پیام های مهم
کلاس w3-panel یک نمایش خوب برای پیام ها فراهم می کند.
متون اغلب با یک رنگ کم رنگ نمایش داده میشوند:
این شهر پرجمعیت ترین شهر انگلستان ، با یک منطقه شهری با بیش از 9 میلیون نفر جمعیت است.
مثال
<div class="w3-panel w3-pale-green">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
خودتان امتحان کنيد »<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
برای یادگیری بیشتر درباره متون در W3.CSS لطفا مقاله کادرهای واکنشگرا را مطالعه بفرمایید.
پنل ها برای نقل قول ها
کلاس w3-panel برای نمایش نقل قول ها مناسب است.
مثال
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
خودتان امتحان کنيد »<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
برای یادگیری بیشتر درمورد نقل قول های W3.CSS لطفا فصل نقل قول واکنشگرا را مطالعه کنید.
پنل ها برای هشدار ها
کلاس w3-panel مناسب برای نمایش هشدارها است.
هشدارها اغلب با رنگ های پررنگ نمایش داده میشوند:
خطر !
قرمز اغلب نمایش دهنده خطر و موقعیت منفی می باشد.
مثال
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
خودتان امتحان کنيد »<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
پنل ها و کارت ها
مثال
<div class="w3-panel w3-blue w3-card-8">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
خودتان امتحان کنيد »<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
پنل های گردشده
مثال
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
خودتان امتحان کنيد »<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
مخفی کردن(بستن) یک پنل
مثال
<div class="w3-panel w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
خودتان امتحان کنيد »<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
نمایش (بازکردن) یک پنل
مثال
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show panel</button>
<div id="id01" class="w3-panel w3-green" style="display:none">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
خودتان امتحان کنيد »<div id="id01" class="w3-panel w3-green" style="display:none">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3779
