Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus، porta ac consectetur ac، vestibulum at eros.
بوت استرپ یک جعبه ابزار از توییتر است که برای شروع توسعه برنامه های وب و سایت ها طراحی شده است.
این شامل CSS و HTML پایه برای تایپوگرافی، فرمها، دکمهها، جداول، شبکهها، ناوبری و موارد دیگر است.
هشدار Nerd: Bootstrap با Less ساخته شده است و برای کار کردن با مرورگرهای مدرن طراحی شده است.
برای سریعترین و آسانترین شروع، فقط این قطعه را در صفحه وب خود کپی کنید.
طرفدار استفاده از Less هستید؟ مشکلی نیست، فقط مخزن را شبیه سازی کنید و این خطوط را اضافه کنید:
با مخزن رسمی Bootstrap در Github، مشکلات را بارگیری، فورک، کشیدن، فایلها و موارد دیگر.
در روزهای اولیه توییتر، مهندسان تقریباً از هر کتابخانه ای که با آن آشنایی داشتند برای برآورده کردن الزامات front-end استفاده می کردند. بوت استرپ بهعنوان پاسخی به چالشهایی آغاز شد که در اولین Hackweek توییتر به سرعت توسعه یافت.
با کمک و بازخورد بسیاری از مهندسان در توییتر، بوت استرپ به طور قابل توجهی رشد کرده است تا نه تنها سبکهای اولیه، بلکه الگوهای طراحی جلویی ظریفتر و بادوامتر را در بر بگیرد.
بوت استرپ در مرورگرهای اصلی مدرن مانند کروم، سافاری، اینترنت اکسپلورر و فایرفاکس تست شده و پشتیبانی می شود.
بوت استرپ با CSS های کامپایل شده، کامپایل نشده و قالب های نمونه همراه است.
سیستم شبکه پیشفرض ارائه شده به عنوان بخشی از Bootstrap یک شبکه 16 ستونی 940 پیکسلی است. این مزه سیستم محبوب شبکه 960 است، اما بدون حاشیه/بالشتک اضافی در سمت چپ و راست.
همانطور که در اینجا نشان داده شده است، یک طرح اولیه را می توان با دو "ستون" ایجاد کرد، که هر کدام شامل تعدادی از 16 ستون پایه است که ما به عنوان بخشی از سیستم شبکه خود تعریف کردیم. برای تنوع بیشتر به نمونه های زیر مراجعه کنید.
- <div class = "ردیف" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
طرحبندی پیشفرض و ساده با پهنای 940 پیکسل، تقریباً برای هر وبسایت یا صفحهای که توسط یک صفحه ارائه میشود <div.container>
.
- <بدن>
- <div class = "کانتینر" >
- ...
- </div>
- </body>
ساختار صفحه سیال جایگزین و انعطاف پذیر با حداقل و حداکثر عرض و نوار کناری سمت چپ. برای برنامه ها و اسناد عالی است.
- <بدن>
- <div class = "container-fluid" >
- <div class = "نوار کناری" >
- ...
- </div>
- <div class = "محتوا" >
- ...
- </div>
- </div>
- </body>
یک سلسله مراتب تایپوگرافی استاندارد برای ساختار صفحات وب شما.
کل شبکه تایپوگرافی بر اساس دو متغیر Less در فایل preboot.less ما است: @basefont
و @baseline
. اولی اندازه فونت پایه است که در سرتاسر استفاده می شود و دومی ارتفاع خط پایه است.
ما از آن متغیرها و مقداری ریاضی برای ایجاد حاشیهها، بالشتکها و ارتفاعهای خط از همه نوع خود و موارد دیگر استفاده میکنیم.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula ut id elit.
استفاده از تاکید، آدرس و اختصارات
<strong>
<em>
<address>
<abbr>
برچسب های تاکیدی ( <strong>
و <em>
) باید برای نشان دادن اهمیت یا تاکید بیشتر یک کلمه یا عبارت نسبت به کپی اطراف آن استفاده شود. برای <strong>
اهمیت و تاکید <em>
بر استرس استفاده کنید.
Fusce dapibus ، telus ac cursus commodo ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero، یک pharetra augue.
توجه: استفاده از تگ ها <b>
و <i>
تگ ها در HTML5 هنوز اشکالی ندارد و نیازی نیست که به ترتیب به صورت پررنگ و مورب استایل بندی شوند (البته اگر عنصر معنایی بیشتری وجود دارد، از آن استفاده کنید). <b>
به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است، در حالی <i>
که بیشتر برای صدا، اصطلاحات فنی و غیره است.
این <address>
عنصر برای اطلاعات تماس نزدیکترین اجداد خود یا کل بدنه کار استفاده می شود. در اینجا به نظر می رسد:
توجه: هر خط در یک <address>
باید با یک خط شکسته ( <br />
) خاتمه یابد یا در یک تگ سطح بلوک (مثلاً <p>
) پیچیده شود تا محتوا به درستی ساختار یابد.
برای اختصارات و کلمات اختصاری، از <abbr>
تگ استفاده کنید ( <acronym>
در HTML5 منسوخ شده است ). فرم مختصر را درون تگ قرار دهید و یک عنوان برای نام کامل تعیین کنید.
<blockquote>
<p>
<small>
برای اضافه کردن یک بلوک نقل قول، آن را بپیچید <blockquote>
و <p>
برچسب <small>
بزنید. از <small>
عنصر برای ذکر منبع خود استفاده کنید و قبل از آن یک خط خط دریافت خواهید —
کرد.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis dapibus posuere velit aliquet.
دکتر جولیوس هیبرت
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
میزها برای خیلی چیزها عالی هستند. با این حال، جداول عالی برای مفید، مقیاس پذیر و خوانا (در سطح کد) به مقداری علاقه به نشانه گذاری نیاز دارند. در اینجا چند نکته برای کمک وجود دارد.
همیشه سرصفحه های ستون خود را <thead>
طوری بپیچید که سلسله مراتب <thead>
> <tr>
> <th>
باشد.
مانند سرصفحه های ستون، تمام محتوای جدول شما باید در یک شکل پیچیده شود <tbody>
تا سلسله مراتب شما <tbody>
> <tr>
> <td>
باشد.
برای اطمینان از خوانایی و حفظ ساختار، همه جداول به صورت خودکار تنها با حاشیههای ضروری طراحی میشوند. بدون نیاز به اضافه کردن کلاس ها یا ویژگی های اضافی.
# | نام کوچک | نام خانوادگی | زبان |
---|---|---|---|
1 | مقداری | یکی | انگلیسی |
2 | جو | سیکس پک | انگلیسی |
3 | استو | دندانه | کد |
- <جدول>
- ...
- </table>
با افزودن راه راه گورخری، میزهای خود را کمی شیک کنید—فقط .zebra-striped
کلاس را اضافه کنید.
# | نام کوچک | نام خانوادگی | زبان |
---|---|---|---|
1 | مقداری | یکی | انگلیسی |
2 | جو | سیکس پک | انگلیسی |
3 | استو | دندانه | کد |
توجه: Zebra-striping یک پیشرفت پیشرونده است که برای مرورگرهای قدیمیتر مانند IE8 و پایینتر در دسترس نیست.
- <table class = "گورخر راه راه" >
- ...
- </table>
با در نظر گرفتن مثال قبلی، با ارائه قابلیت مرتبسازی از طریق jQuery و افزونه Tablesorter ، مفید بودن جداول خود را بهبود میبخشیم . برای تغییر مرتبسازی، روی سرصفحه هر ستون کلیک کنید.
# | نام کوچک | نام خانوادگی | زبان |
---|---|---|---|
1 | شما | یکی | انگلیسی |
2 | جو | سیکس پک | انگلیسی |
3 | استو | دندانه | کد |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <اسکریپت >
- $ ( تابع () {
- $ ( "table# sortTableExample" ). جدولبندی ({ sortList : [[ 1 , 0 ]] });
- })؛
- </script>
- <table class = "گورخر راه راه" >
- ...
- </table>
به همه فرم ها سبک های پیش فرض داده می شود تا آنها را به روشی خوانا و مقیاس پذیر ارائه کنند. سبکها برای ورودیهای متن، فهرستهای انتخابی، مناطق متنی، دکمههای رادیویی و کادرهای چک و دکمهها ارائه میشوند.
به HTML فرم خود اضافه .form-stacked
کنید و برچسب هایی را در بالای فیلدهای آنها به جای سمت چپ آنها خواهید داشت. اگر فرمهای شما کوتاه باشند یا دو ستون ورودی برای فرمهای سنگینتر داشته باشید، عالی عمل میکند.
به عنوان یک قرارداد، دکمه ها برای اعمال استفاده می شوند در حالی که پیوندها برای اشیاء استفاده می شوند. به عنوان مثال، "دانلود" می تواند یک دکمه و "فعالیت اخیر" می تواند یک پیوند باشد.
همه دکمهها بهطور پیشفرض دارای سبک خاکستری روشن هستند، اما تعدادی از کلاسهای کاربردی را میتوان برای سبکهای رنگی مختلف اعمال کرد. این کلاس ها شامل کلاس آبی .primary
، کلاس آبی روشن .info
، کلاس سبز .success
و کلاس قرمز .danger
است. بعلاوه، رول کردن سبک های خود کار ساده ای است.
استایلهای دکمهای را میتوان برای هر چیزی با .btn
اعمال اعمال کرد. معمولاً میخواهید این موارد را فقط روی عناصر <a>
، <button>
و انتخاب کنید اعمال کنید. <input>
در اینجا به نظر می رسد:
دکمه های بزرگتر یا کوچکتر را دوست دارید؟ آن را داشته باشید!
برای دکمههایی که فعال نیستند یا به دلایلی توسط برنامه غیرفعال شدهاند، از حالت غیرفعال استفاده کنید. این .disabled
برای پیوندها و :disabled
برای <button>
عناصر است.
div.alert-message
پیام های تک خطی برای برجسته کردن شکست، شکست احتمالی یا موفقیت یک عمل. به خصوص برای فرم ها مفید است.
div.alert-message.block-message
برای پیام هایی که نیاز به کمی توضیح دارند، هشدارهای سبک پاراگراف داریم. اینها برای حباب کردن پیامهای خطای طولانیتر، هشدار دادن به کاربر در مورد یک اقدام معلق، یا فقط ارائه اطلاعات برای تاکید بیشتر در صفحه مناسب هستند.
مدال ها - دیالوگ ها یا لایت باکس ها - برای اقدامات متنی در موقعیت هایی که حفظ زمینه پس زمینه مهم است، عالی هستند.
یک بدن خوب…
Twipsies برای کمک به کاربر گیج و هدایت آنها در جهت درست بسیار مفید است.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus نتیجه نتیجه، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam معماری
از پاپاورها برای ارائه اطلاعات زیرمتنی به یک صفحه بدون تأثیر بر طرحبندی استفاده کنید.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus، porta ac consectetur ac، vestibulum at eros.
Bootstrap با Preboot ساخته شده است، یک بسته منبع باز از میکسین ها و متغیرها برای استفاده همراه با Less ، یک پیش پردازنده CSS برای توسعه سریعتر و آسان تر وب.
بررسی کنید که چگونه از Preboot در Bootstrap استفاده کردهایم و اگر Less را در پروژه بعدی خود اجرا کنید چگونه میتوانید از آن استفاده کنید.
از این گزینه برای استفاده کامل از متغیرهای Bootstrap Less، mixins و nesting در CSS از طریق جاوا اسکریپت در مرورگر خود استفاده کنید.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" </script>
راه حل .js را احساس نمی کنید؟ برنامه Less Mac را امتحان کنید یا از Node.js برای کامپایل هنگام استقرار کد خود استفاده کنید.
در اینجا برخی از نکات برجسته در توییتر بوت استرپ به عنوان بخشی از بوت استرپ وجود دارد. برای دانلود و کسب اطلاعات بیشتر به وب سایت بوت استرپ یا صفحه پروژه Github بروید.
متغیرهای Less برای حفظ و بهروزرسانی بدون سردرد CSS شما عالی هستند. وقتی میخواهید مقدار رنگ یا مقداری که اغلب استفاده میشود را تغییر دهید، آن را در یک نقطه بهروزرسانی کنید و آماده هستید.
- // پیوندها
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // خاکستری
- @black : #000;
- @grayDark : روشن ( @black , 25 %)؛
- @grey : روشن کردن ( @black , 50 %);
- @grayLight : روشن ( @black ، 70 %)؛
- @grayLighter : روشن کردن ( @black , 90 %);
- @white : #fff;
- // رنگ های تاکیدی
- @blue : #08b5fb;
- @green : #46a546;
- @red : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @بنفش : #7a43b6 ;
- // شبکه پایه
- @basefont : 13px ;
- @baseline : 18px ;
Less علاوه بر /* ... */
سینتکس معمولی CSS، سبک دیگری از نظر دادن را نیز ارائه می دهد.
- // این یک نظر است
- /* این هم یک نظر */
میکس ها اساسا شامل یا جزئی برای CSS هستند و به شما این امکان را می دهند که یک بلوک از کد را در یکی ترکیب کنید. آنها برای ویژگی های پیشوند فروشنده مانند box-shadow
، گرادیان های متقابل مرورگر، پشته های فونت و موارد دیگر عالی هستند. در زیر نمونه ای از میکس های موجود در Bootstrap آمده است.
- #فونت {
- . مختصر ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- فونت - وزن : @weight ;
- خط - ارتفاع : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- فونت - وزن : @weight ;
- خط - ارتفاع : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- فونت - وزن : @weight ;
- خط - ارتفاع : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- font - size : @size ;
- فونت - وزن : @weight ;
- خط - ارتفاع : @lineHeight ;
- }
- }
- #شیب {
- . افقی ( @startColor : #555، @endColor: #333) {
- پس زمینه - رنگ : @endColor ;
- پس زمینه - تکرار : تکرار - x ;
- پسزمینه - تصویر : - khtml - گرادیان ( خطی ، سمت چپ بالا ، بالا سمت راست ، از ( @startColor )، به ( @endColor )); // Conqueror
- پسزمینه - تصویر : - moz - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // FF 3.6+
- پس زمینه - تصویر : - ms - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // IE10
- پسزمینه - تصویر : - webkit - گرادیان ( خطی ، بالا سمت چپ ، بالا سمت راست ، توقف رنگ ( 0 ٪، @startColor )، توقف رنگ ( 100 ٪ ، @endColor ) ). // Safari 4+، Chrome 2+
- پسزمینه - تصویر : - webkit - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // Safari 5.1+، Chrome 10+
- پس زمینه - تصویر : - o - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // Opera 11.10
- پسزمینه - تصویر : خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // استاندارد لو
- }
- . عمودی ( @startColor : #555، @endColor: #333) {
- پس زمینه - رنگ : @endColor ;
- پس زمینه - تکرار : تکرار - x ;
- پسزمینه - تصویر : - khtml - گرادیان ( خطی ، سمت چپ بالا ، پایین سمت چپ ، از ( @startColor )، به ( @endColor )); // Conqueror
- پسزمینه - تصویر : - moz - خطی - گرادیان ( @startColor ، @endColor ); // FF 3.6+
- پس زمینه - تصویر : - ms - خطی - گرادیان ( @startColor ، @endColor ); // IE10
- پسزمینه - تصویر : - webkit - گرادیان ( خطی ، بالا سمت چپ ، پایین سمت چپ ، توقف رنگ ( 0 ٪، @startColor )، رنگ - توقف ( 100 ٪ ، @endColor ) ). // Safari 4+، Chrome 2+
- پس زمینه - تصویر : - وب کیت - خطی - گرادیان ( @startColor ، @endColor ); // Safari 5.1+، Chrome 10+
- پسزمینه - تصویر : - o - خطی - گرادیان ( @startColor ، @endColor ); // Opera 11.10
- پسزمینه - تصویر : خطی - گرادیان ( @startColor ، @endColor ); // استاندارد
- }
- . جهت دار ( @startColor : #555، @endColor: #333، @deg: 45deg) {
- ...
- }
- . عمودی - سه - رنگ ( @startColor : #00b3ee، @midColor: #7a43b6، @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
برای تولید میکسهای انعطافپذیر و قدرتمند مانند موارد زیر، کمی شیک باشید و کمی ریاضی انجام دهید.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // سیستم شبکه ای
- . ظرف {
- عرض : @siteWidth ;
- حاشیه : 0 خودکار ;
- . clearfix ();
- }
- . ستون ها ( @columnSpan : 1 ) {
- عرض : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . افست ( @columnOffset : 1 ) {
- حاشیه - چپ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }