مقدمه
درود بیکران خدمت شما کاربر محترم وبسایت ilikephp . من علیرضا حاتمی نیا هستم و با آموزش قسمتی دیگر از سری آموزش های Bootstrap در خدمت شما هستم.
در جلسه قبل با آموزش فرم ها در Bootstrap در خدمت شما بودیم. در این جلسه با نحوه ساخت Jumbotron در بوت استرپ آشنا خواهید شد.
Jumbotron یا جامبوترون چیست ؟
عبارت Jumbotron که از کلمه Jumbovision اقتباس شده است اولین بار توسط کمپانی سونی برای تلوزیون های بسیار عریض و بزرگ خود استفاده شد. هدف از ساخت این تلوزیون ها که معمولا در خیابان ها یا استادیوم های ورزشی نصب می گردید ،جلب توجه مردم جهت درج تبلیغات و یا برنامه های زنده بود.
در بوت استرپ Jumbotron به کادر بزرگ و عریضی گفته می شود که برای جلب توجه کاربران به مطالب ، تصاویر یا محتواهای خاص مورد استفاده قرار می گیرد.
کادر Jumbotron به صورت پیش فرض دارای رنگ خاکستری و متون بزرگ و لبه های گرد می باشد که می توانید آن را به سلیقه خود تغییر دهید.
توجه داشته باشید که در Jumbotron میتوانید از تمام تگ های html و استایل ها و کلاس های Bootstrap استفاده کنید.
نحوه ساخت Jumbotron در بوت استرپ
<div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div>
خروجی کدهای بالا به صورت شکل زیر است
توجه داشته باشید .کادر Jumbotron به تنهایی کل صفحه را شامل می شود. اگر می خواهید که این کادر از گوشه های چپ و راست صفحه فاصله داشته باشد بایستی آن را داخل یک <div> با کلاس container قرار دهید.
<div class = "container"> <div class = " jumbotron "> <h1>Welcome to ILikePHP.ir!</h1> <p>This is an example for jumbotron.</p> <p> <a class = "btn btn-primary btn-lg" role = "button">Information</a> <a class = "btn btn-success btn-lg" role = "button">SignUp</a> </p> </div> </div>
در صورتی که قصد دارید Jumbotron کل صفحه را شامل شود ولی گوشه های گرد را نداشته باشد کافی ست <div> که دارای کلاس Jumbotron است را خارج از هر کلاس container بنویسید و یک div با کلاس container داخل Jumbotron قرار دهید.
<div class = "jumbotron"> <div class = "container"> <h1>Welcome to ILikePHP.ir!</h1> <p>This is an example for jumbotron.</p> <p> <a class = "btn btn-primary btn-lg" role = "button">Information</a> <a class = "btn btn-success btn-lg" role = "button">SignUp</a> </p> </div> </div>
