Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
বুটস্ট্র্যাপ সম্পর্কে সংক্ষিপ্ত ইতিহাস, ব্রাউজার সমর্থন, এবং আরও অনেক কিছু
ইতিহাস
টুইটারের আগের দিনগুলিতে, প্রকৌশলীরা ফ্রন্ট-এন্ড প্রয়োজনীয়তা মেটাতে তাদের পরিচিত প্রায় কোনও লাইব্রেরি ব্যবহার করেছিলেন। বুটস্ট্র্যাপ টুইটারের প্রথম হ্যাকউইকের সময় উপস্থাপিত এবং বিকাশ দ্রুত ত্বরান্বিত হওয়া চ্যালেঞ্জগুলির উত্তর হিসাবে শুরু হয়েছিল।
টুইটারে অনেক প্রকৌশলীর সাহায্য এবং প্রতিক্রিয়ায়, বুটস্ট্র্যাপ শুধুমাত্র মৌলিক শৈলীই নয়, আরও মার্জিত এবং টেকসই ফ্রন্ট-এন্ড ডিজাইন প্যাটার্নগুলিকে অন্তর্ভুক্ত করতে উল্লেখযোগ্যভাবে বৃদ্ধি পেয়েছে।
dev.twitter.com এ আরও পড়ুন ›
ব্রাউজার সমর্থন
বুটস্ট্র্যাপ ক্রোম, সাফারি, ইন্টারনেট এক্সপ্লোরার এবং ফায়ারফক্সের মতো প্রধান আধুনিক ব্রাউজারগুলিতে পরীক্ষিত এবং সমর্থিত।
- সর্বশেষ সাফারি
- সর্বশেষ গুগল ক্রোম
- ফায়ারফক্স 4+
- ইন্টারনেট এক্সপ্লোরার 7+
কি অন্তর্ভুক্ত
বুটস্ট্র্যাপ কম্পাইল করা CSS, uncompiled, এবং উদাহরণ টেমপ্লেট সহ সম্পূর্ণ আসে।
- সমস্ত মূল .less ফাইল
- সম্পূর্ণরূপে সংকলিত এবং ছোট সিএসএস
- সম্পূর্ণ স্টাইলগাইড ডকুমেন্টেশন
- উদাহরণ পৃষ্ঠা টেমপ্লেট (আরো শীঘ্রই আসছে)
গ্রিড সিস্টেম স্ট্যান্ডার্ড 940px রক করুন বা আপনার নিজের রোল করুন
ডিফল্ট গ্রিড
বুটস্ট্র্যাপের অংশ হিসেবে প্রদত্ত ডিফল্ট গ্রিড সিস্টেম হল একটি 940px চওড়া 16-কলামের গ্রিড। এটি জনপ্রিয় 960 গ্রিড সিস্টেমের একটি স্বাদ, কিন্তু বাম এবং ডান দিকে অতিরিক্ত মার্জিন/প্যাডিং ছাড়াই।
গ্রিড মার্কআপের উদাহরণ
এখানে দেখানো হিসাবে, দুটি "কলাম" দিয়ে একটি মৌলিক লেআউট তৈরি করা যেতে পারে, প্রতিটি 16টি মৌলিক কলামের একটি সংখ্যক বিস্তৃত যা আমরা আমাদের গ্রিড সিস্টেমের অংশ হিসাবে সংজ্ঞায়িত করেছি। আরও বৈচিত্র্যের জন্য নীচের উদাহরণগুলি দেখুন।
- <div class="row"> ক্লাস = "সারি" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16
অফসেটিং কলাম
4
8 অফসেট 4
4 অফসেট 4
4 অফসেট 4
5 অফসেট 3
5 অফসেট 3
10 অফসেট 6
ওয়েবপেজ তৈরির জন্য লেআউট বেসিক টেমপ্লেট
স্থির বিন্যাস
যে কোনো সাইট বা পৃষ্ঠার জন্য একটি মৌলিক 940px চওড়া, কেন্দ্রীভূত কন্টেইনার লেআউট।
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
তরল লেআউট
একটি নমনীয় তরল বা তরল পৃষ্ঠার গঠন যার সর্বনিম্ন- এবং সর্বোচ্চ-প্রস্থ এবং একটি বাম দিকের সাইডবার। অ্যাপের জন্য দারুণ।
- <body>
- <div class = "container-fluid" >
- <div ক্লাস = "সাইডবার" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
টাইপোগ্রাফি শিরোনাম, অনুচ্ছেদ, তালিকা এবং অন্যান্য ইনলাইন টাইপ উপাদান
শিরোনাম এবং অনুলিপি
আপনার ওয়েবপৃষ্ঠাগুলি গঠনের জন্য একটি আদর্শ টাইপোগ্রাফিক অনুক্রম।
h1. শিরোনাম 1
h2. শিরোনাম 2
h3. শিরোনাম 3
h4. শিরোনাম 4
h5. শিরোনাম 5
h6. শিরোনাম 6
উদাহরণ অনুচ্ছেদ
নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Nullam id dolor id nibh ultricies vehicula ut id elit.
উদাহরণ শিরোনাম উপ-শিরোনাম আছে...
বিবিধ উপাদান
জোর, ঠিকানা, এবং সংক্ষিপ্ত রূপ ব্যবহার করে
<strong> <em> <address> <abbr>
কখন ব্যবহার করতে হবে
জোর ট্যাগ ( <strong>এবং <em>) ব্যবহার করা উচিত একটি শব্দ বা শব্দগুচ্ছের আশেপাশের অনুলিপির সাথে সম্পর্কিত অতিরিক্ত গুরুত্ব বা জোর নির্দেশ করার জন্য। <strong>গুরুত্ব এবং চাপ জোর <em>জন্য ব্যবহার করুন .
একটি অনুচ্ছেদে জোর দেওয়া
ফুস ড্যাপিবাস , টেলস এসি কার্সাস কমোডো , টরটর মৌরিস কনডিমেন্টাম নিভ , ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। Maecenas faucibus mollis interdum. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু।
দ্রষ্টব্য:<b> HTML5 ব্যবহার করা এবং ট্যাগ করা এখনও ঠিক আছে <i>, কিন্তু সেগুলি আর সহজাত শৈলীর সাথে আসে না। <b>অতিরিক্ত গুরুত্ব না দিয়ে শব্দ বা বাক্যাংশগুলিকে হাইলাইট করার জন্য বোঝানো হয়, যদিও <i>বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।
ঠিকানা
উপাদানটি তার নিকটতম <address>পূর্বপুরুষ বা কাজের পুরো অংশের যোগাযোগের তথ্যের জন্য ব্যবহৃত হয়। এটি দেখতে কেমন তা এখানে:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
দ্রষ্টব্য: একটি লাইনের প্রতিটি লাইন <address>অবশ্যই একটি লাইন-ব্রেক ( ) দিয়ে শেষ করতে হবে বা বিষয়বস্তুকে সঠিকভাবে গঠন করতে <br />একটি ব্লক-লেভেল ট্যাগ (যেমন, ) দিয়ে মোড়ানো উচিত ।<p>
শব্দ সংক্ষেপ
সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য, <abbr>ট্যাগটি ব্যবহার করুন ( HTML5<acronym> তে অবচয়িত )। ট্যাগের মধ্যে শর্টহ্যান্ড ফর্মটি রাখুন এবং সম্পূর্ণ নামের জন্য একটি শিরোনাম সেট করুন।
ব্লককোট
<blockquote> <p> <small>
কিভাবে উদ্ধৃতি
একটি ব্লককোট অন্তর্ভুক্ত করতে, <blockquote>চারপাশে মোড়ানো <p>এবং <small>ট্যাগ করুন। <small>আপনার উৎস উদ্ধৃত করার জন্য উপাদানটি ব্যবহার করুন এবং আপনি এটির —আগে একটি এম ড্যাশ পাবেন।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যার একটি পূর্বে ভেনেনাটিস ড্যাপিবাস পোস্যুয়ার ভেলিট অ্যালিকেট।
ডাঃ জুলিয়াস হিবার্ট
তালিকা
ক্রমহীন<ul>
- অ্যাডমিন সরবরাহকারী
- কনসেক্টেতুর অ্যাডিপিসিং এলিট
- ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
- প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
- নুল্লা ভোলুটপাট আলিকাম ভেলিট
- Phasellus iaculis neque
- Purus sodales ultricies
- ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
- এসি tristique libero volutpat এ
- Faucibus porta lacus fringilla vel
- Aenean বসে amet erat nunc
- এগেট পোর্টটিটর লোরেম
স্টাইলবিহীন<ul.unstyled>
- অ্যাডমিন সরবরাহকারী
- কনসেক্টেতুর অ্যাডিপিসিং এলিট
- ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
- প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
- নুল্লা ভোলুটপাট আলিকাম ভেলিট
- Phasellus iaculis neque
- Purus sodales ultricies
- ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
- এসি tristique libero volutpat এ
- Faucibus porta lacus fringilla vel
- Aenean বসে amet erat nunc
- এগেট পোর্টটিটর লোরেম
আদেশ দিয়েছেন<ol>
- অ্যাডমিন সরবরাহকারী
- কনসেক্টেতুর অ্যাডিপিসিং এলিট
- ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
- প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
- নুল্লা ভোলুটপাট আলিকাম ভেলিট
- Faucibus porta lacus fringilla vel
- Aenean বসে amet erat nunc
- এগেট পোর্টটিটর লোরেম
বর্ণনাdl
- বর্ণনা তালিকা
- একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
- ইউইসমোড
- Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- মালেসুদা পোর্টা
- Etiam porta sem malesuada Magna mollis euismod.
টেবিলের জন্য, আপনি এটি অনুমান করেছেন, ট্যাবুলার ডেটা
বিল্ডিং টেবিল
<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>
টেবিলগুলি অনেক কিছুর জন্য দুর্দান্ত। দুর্দান্ত টেবিল, তবে, দরকারী, পরিমাপযোগ্য এবং পঠনযোগ্য (কোড স্তরে) হতে কিছুটা মার্কআপ প্রেমের প্রয়োজন। সাহায্য করার জন্য এখানে কয়েকটি টিপস রয়েছে৷
সর্বদা আপনার কলামের শিরোনামগুলিকে <thead>এমনভাবে মুড়ে দিন যাতে অনুক্রমটি হয় <thead>> <tr>> <th>।
কলাম শিরোনামগুলির মতো, আপনার টেবিলের সমস্ত বডি কন্টেন্ট একটিতে মোড়ানো উচিত <tbody>যাতে আপনার অনুক্রমটি হয় <tbody>> <tr>> <td>।
উদাহরণ: ডিফল্ট টেবিল শৈলী
পঠনযোগ্যতা নিশ্চিত করতে এবং গঠন বজায় রাখার জন্য সমস্ত টেবিল স্বয়ংক্রিয়ভাবে শুধুমাত্র প্রয়োজনীয় সীমানা দিয়ে স্টাইল করা হবে। অতিরিক্ত ক্লাস বা গুণাবলী যোগ করার প্রয়োজন নেই।
| # | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
|---|---|---|---|
| 1 | কিছু | এক | ইংরেজি |
| 2 | জো | সিক্স প্যাক | ইংরেজি |
| 3 | স্টু | ডেন্ট | কোড |
- <table class="common-table"> ক্লাস = "সাধারণ টেবিল" >
- ...
- </ টেবিল>
উদাহরণ: জেব্রা-ডোরাকাটা
জেব্রা-স্ট্রাইপিং যোগ করে আপনার টেবিলের সাথে একটু অভিনব হয়ে উঠুন—শুধু .zebra-stripedক্লাস যোগ করুন।
| # | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
|---|---|---|---|
| 1 | কিছু | এক | ইংরেজি |
| 2 | জো | সিক্স প্যাক | ইংরেজি |
| 3 | স্টু | ডেন্ট | কোড |
দ্রষ্টব্য: জেব্রা-স্ট্রাইপিং একটি প্রগতিশীল বর্ধন যা IE8 এবং নীচের মত পুরানো ব্রাউজারগুলির জন্য উপলব্ধ নয়৷
- <table class="common-table zebra-striped">৷ ক্লাস = "সাধারণ-টেবিল জেব্রা-স্ট্রিপড" >
- ...
- </ টেবিল>
উদাহরণ: জেব্রা-স্ট্রিপড w/ TableSorter.js
পূর্ববর্তী উদাহরণ গ্রহণ করে, আমরা jQuery এবং Tablesorter প্লাগইনের মাধ্যমে সাজানোর কার্যকারিতা প্রদান করে আমাদের টেবিলের উপযোগিতা উন্নত করি । সাজানোর পরিবর্তন করতে যেকোনো কলামের হেডারে ক্লিক করুন।
| # | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
|---|---|---|---|
| 1 | তোমার | এক | ইংরেজি |
| 2 | জো | সিক্স প্যাক | ইংরেজি |
| 3 | স্টু | ডেন্ট | কোড |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <স্ক্রিপ্ট >
- $ ( ফাংশন () {
- $ ( "টেবিল#sortTableExample" )। টেবিলসর্টার ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <টেবিল ক্লাস = "সাধারণ-টেবিল জেব্রা-স্ট্রিপড" >
- ...
- </ টেবিল>
ফর্ম
ডিফল্ট শৈলী
একটি পঠনযোগ্য এবং মাপযোগ্য উপায়ে উপস্থাপন করার জন্য সমস্ত ফর্মকে ডিফল্ট শৈলী দেওয়া হয়। টেক্সট ইনপুট, সিলেক্ট লিস্ট, টেক্সটেরিয়া, রেডিও বোতাম এবং চেকবক্স এবং বোতামের জন্য শৈলী প্রদান করা হয়।
স্তুপীকৃত ফর্ম
আপনার ফর্মের HTML-এ যোগ করুন .form-stackedএবং তাদের বাম দিকের পরিবর্তে তাদের ক্ষেত্রের উপরে আপনার লেবেল থাকবে। আপনার ফর্মগুলি ছোট হলে বা ভারী ফর্মগুলির জন্য আপনার কাছে দুটি কলাম ইনপুট থাকলে এটি দুর্দান্ত কাজ করে৷
বোতাম
একটি নিয়ম হিসাবে, বোতামগুলি অ্যাকশনের জন্য ব্যবহার করা হয় যখন লিঙ্কগুলি বস্তুর জন্য ব্যবহার করা হয়। উদাহরণস্বরূপ, "ডাউনলোড" একটি বোতাম হতে পারে এবং "সাম্প্রতিক কার্যকলাপ" একটি লিঙ্ক হতে পারে।
সমস্ত বোতাম একটি হালকা ধূসর শৈলীতে ডিফল্ট, কিন্তু একটি নীল .primaryশ্রেণী উপলব্ধ। এছাড়াও, আপনার নিজস্ব শৈলী রোল করা সহজ পিসি।
উদাহরণ বোতাম
বোতাম শৈলী প্রয়োগের সাথে যেকোনো কিছুতে প্রয়োগ করা যেতে পারে .btn। <a>সাধারণত আপনি শুধুমাত্র , <button>, এবং <input>উপাদান নির্বাচন করতে এগুলি প্রয়োগ করতে চান ৷ এটি দেখতে কেমন তা এখানে:
বিকল্প মাপ
অভিনব বড় বা ছোট বোতাম? এইখানে পাবে!
প্রতিবন্ধী রাষ্ট্র
যে বোতামগুলি সক্রিয় নয় বা কোনও কারণে বা অন্য কারণে অ্যাপ দ্বারা অক্ষম করা হয়েছে, অক্ষম অবস্থা ব্যবহার করুন৷ যে .disabledলিঙ্ক :disabledজন্য এবং <button>উপাদান জন্য.
লিঙ্ক
বোতাম
সাফল্য, সতর্কতা, এবং ত্রুটি বার্তা বা সতর্কতার জন্য সতর্কতা এবং ত্রুটি শৈলী
মৌলিক সতর্কতা
ব্যর্থতা, সম্ভাব্য ব্যর্থতা, বা একটি কর্মের সাফল্য হাইলাইট করার জন্য এক-লাইন বার্তা। ফর্ম জন্য বিশেষভাবে দরকারী.
বার্তা ব্লক করুন
যে বার্তাগুলির জন্য কিছুটা ব্যাখ্যা প্রয়োজন, আমাদের কাছে অনুচ্ছেদ শৈলী সতর্কতা রয়েছে৷ এগুলি দীর্ঘ ত্রুটি বার্তাগুলিকে বুদবুদ করার জন্য, একটি মুলতুবি ক্রিয়া সম্পর্কে ব্যবহারকারীকে সতর্ক করার জন্য বা পৃষ্ঠায় আরও জোর দেওয়ার জন্য তথ্য উপস্থাপনের জন্য উপযুক্ত।
মডেল, টুলটিপস এবং পপোভারে সামগ্রী প্রদর্শনের জন্য পপোভার উপাদান
মডেল
মোডাল—সংলাপ বা লাইটবক্স—এমন পরিস্থিতিতে প্রাসঙ্গিক ক্রিয়াগুলির জন্য দুর্দান্ত যেখানে পটভূমির প্রসঙ্গ বজায় রাখা গুরুত্বপূর্ণ৷
মডেল শিরোনাম
×একটি সূক্ষ্ম শরীর…
টুল টিপস
একটি বিভ্রান্ত ব্যবহারকারীকে সাহায্য করার জন্য এবং তাদের সঠিক দিকে নির্দেশ করার জন্য Twipsies অত্যন্ত কার্যকর।
Lorem ipsum dolar sit amet illo error ipsum veritatis or iste perspiciatis iste voluptas natus illo quasi odit or natus consequuntur consequuntur, ut 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 architecto explicabo sit quasi fugit fugit, Totam doloremque unde sunt sed dicta quae fuget voluptum voluptum voluptum voluptum
নিচে!
ঠিক
বাম!
উপরে!
পপোভারস
লেআউট প্রভাবিত না করে একটি পৃষ্ঠায় সাবটেক্সচুয়াল তথ্য প্রদান করতে পপওভার ব্যবহার করুন।
পপওভার শিরোনাম
কম সুপারচার্জ সহ বুটস্ট্র্যাপ ব্যবহার করে ভেরিয়েবল, মিক্সিন এবং ফাংশন সহ আপনার CSS করুন
বুটস্ট্র্যাপ প্রিবুট দিয়ে তৈরি করা হয়েছিল, একটি ওপেন-সোর্স প্যাক যা মিক্সিন এবং ভেরিয়েবলের সাথে একত্রে ব্যবহার করা হবে , দ্রুত এবং সহজ ওয়েব ডেভেলপমেন্টের জন্য একটি CSS প্রিপ্রসেসর।
বুটস্ট্র্যাপে আমরা কীভাবে প্রিবুট ব্যবহার করেছি এবং আপনার পরবর্তী প্রকল্পে কম চালানোর জন্য আপনি কীভাবে এটি ব্যবহার করতে পারেন তা দেখুন।
এটি কিভাবে ব্যবহার করতে
আপনার ব্রাউজারে জাভাস্ক্রিপ্টের মাধ্যমে বুটস্ট্র্যাপের কম ভেরিয়েবল, মিক্সিন এবং সিএসএস-এ নেস্টিংয়ের সম্পূর্ণ ব্যবহার করতে এই বিকল্পটি ব্যবহার করুন।
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" href = "less/bootstrap.less" মিডিয়া = "সমস্ত" />
- <script src = "js/less-1.0.41.min.js" ></script>
.js সমাধান অনুভব করছেন না? Less Mac অ্যাপ ব্যবহার করে দেখুন বা যখন আপনি আপনার কোড স্থাপন করবেন তখন কম্পাইল করতে Node.js ব্যবহার করুন।
কি অন্তর্ভুক্ত
বুটস্ট্র্যাপের অংশ হিসাবে টুইটার বুটস্ট্র্যাপে যা অন্তর্ভুক্ত করা হয়েছে তার কয়েকটি হাইলাইট এখানে রয়েছে। ডাউনলোড করতে এবং আরও জানতে বুটস্ট্র্যাপ ওয়েবসাইট বা গিথুব প্রকল্পের পৃষ্ঠায় যান।
রঙ পরিবর্তনশীল
কম ভেরিয়েবলগুলি আপনার CSS মাথাব্যথা মুক্ত রাখা এবং আপডেট করার জন্য উপযুক্ত। আপনি যখন একটি রঙের মান বা প্রায়শই ব্যবহৃত মান পরিবর্তন করতে চান, তখন এটি একটি জায়গায় আপডেট করুন এবং আপনি সেট হয়ে গেছেন।
- // লিঙ্ক
- @linkColor : #8b59c2;
- @linkColorHover : গাঢ় ( @linkColor , 10 );
- // ধূসর
- @কালো : #000;
- @ধূসর ডার্ক : হালকা করুন ( @কালো , 25 %);
- @ধূসর : হালকা করুন ( @কালো , 50 %);
- @ধূসর আলো : হালকা করুন ( @কালো , 70 %);
- @গ্রেলাইটার : হালকা করুন ( @ব্ল্যাক , 90 %);
- @সাদা : #ffff ;
- // অ্যাকসেন্ট রং
- @নীল : #08b5fb ;
- @সবুজ : #46a546 ;
- @লাল : #9d261d ;
- @হলুদ : #ffc40d ;
- @কমলা : #f89406 ;
- @পিঙ্ক : #c3325f ;
- @বেগুনি : #7a43b6 ;
- // বেসলাইন
- @বেসলাইন : 20px ;
মন্তব্য করছেন
/* ... */কম সিএসএস-এর স্বাভাবিক সিনট্যাক্স ছাড়াও মন্তব্য করার আরেকটি শৈলী প্রদান করে ।
- // এটি একটি মন্তব্য
- /* এটিও একটি মন্তব্য */
ওজুতে মিশ্রিত করে
Mixins মূলত CSS এর জন্য অন্তর্ভুক্ত বা আংশিক, যা আপনাকে কোডের একটি ব্লককে একটিতে একত্রিত করতে দেয়। এগুলি বিক্রেতার উপসর্গযুক্ত বৈশিষ্ট্যগুলির জন্য দুর্দান্ত যেমন box-shadow, ক্রস-ব্রাউজার গ্রেডিয়েন্ট, ফন্ট স্ট্যাক এবং আরও অনেক কিছু। নীচে বুটস্ট্র্যাপের সাথে অন্তর্ভুক্ত মিক্সিনের একটি নমুনা রয়েছে।
ফন্ট স্ট্যাক
- #ফন্ট {
- . শর্টহ্যান্ড ( @ওজন : স্বাভাবিক , @আকার : 14px , @ লাইন উচ্চতা : 20px ) {
- ফন্ট সাইজ : @size ; _
- ফন্ট - ওজন : @weight ;
- লাইন - উচ্চতা : @ লাইন উচ্চতা ;
- }
- . সান - সেরিফ ( @ওজন : স্বাভাবিক , @আকার : 14px , @ লাইন উচ্চতা : 20px ) {
- ফন্ট - পরিবার : "হেলভেটিকা নিউ" , হেলভেটিকা , এরিয়াল , সান - সেরিফ ;
- ফন্ট সাইজ : @size ; _
- ফন্ট - ওজন : @weight ;
- লাইন - উচ্চতা : @ লাইন উচ্চতা ;
- }
- . সেরিফ ( @ওজন : স্বাভাবিক , @আকার : 14px , @ লাইন উচ্চতা : 20px ) {
- ফন্ট - পরিবার : "জর্জিয়া" , টাইমস নিউ রোমান , টাইমস , সান - সেরিফ ;
- ফন্ট সাইজ : @size ; _
- ফন্ট - ওজন : @weight ;
- লাইন - উচ্চতা : @ লাইন উচ্চতা ;
- }
- . মনোস্পেস ( @ওজন : স্বাভাবিক , @আকার : 12px , @ লাইন উচ্চতা : 20px ) {
- ফন্ট - পরিবার : "মোনাকো" , কুরিয়ার নিউ , মনোস্পেস ;
- ফন্ট সাইজ : @size ; _
- ফন্ট - ওজন : @weight ;
- লাইন - উচ্চতা : @ লাইন উচ্চতা ;
- }
- }
গ্রেডিয়েন্ট
- # গ্রেডিয়েন্ট {
- . অনুভূমিক ( @startColor : #555, @endColor: #333) {
- পটভূমি - রঙ : @endColor ;
- পটভূমি - পুনরাবৃত্তি : পুনরাবৃত্তি - x ;
- ব্যাকগ্রাউন্ড - ইমেজ : - khtml - গ্রেডিয়েন্ট ( রৈখিক , বাম উপরে , ডান উপরে , ( @startColor ) থেকে ( @endColor ) পর্যন্ত ); // কনকরার
- ব্যাকগ্রাউন্ড - ইমেজ : - moz - লিনিয়ার - গ্রেডিয়েন্ট ( বাম , @startColor , @endColor ); // FF 3.6+
- ব্যাকগ্রাউন্ড - ইমেজ : - ms - লিনিয়ার - গ্রেডিয়েন্ট ( বাম , @startColor , @endColor ); // IE10
- ব্যাকগ্রাউন্ড - ইমেজ : - ওয়েবকিট - গ্রেডিয়েন্ট ( লিনিয়ার , বাম টপ , ডান টপ , কালার - স্টপ ( 0 %, @startColor ), কালার - স্টপ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ব্যাকগ্রাউন্ড - ইমেজ : - ওয়েবকিট - লিনিয়ার - গ্রেডিয়েন্ট ( বাম , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ব্যাকগ্রাউন্ড - ইমেজ : - o - লিনিয়ার - গ্রেডিয়েন্ট ( বাম , @startColor , @endColor ); // অপেরা 11.10
- - ms - ফিল্টার : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- ফিল্টার : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 এবং IE7
- ব্যাকগ্রাউন্ড - ইমেজ : লিনিয়ার - গ্রেডিয়েন্ট ( বাম , @startColor , @endColor ); // লে স্ট্যান্ডার্ড
- }
- . উল্লম্ব ( @startColor : #555, @endColor: #333) {
- পটভূমি - রঙ : @endColor ;
- পটভূমি - পুনরাবৃত্তি : পুনরাবৃত্তি - x ;
- ব্যাকগ্রাউন্ড - ইমেজ : - khtml - গ্রেডিয়েন্ট ( রৈখিক , বাম উপরে , বাম নীচে , ( @startColor ) থেকে ( @endColor ) পর্যন্ত ); // কনকরার
- ব্যাকগ্রাউন্ড - ইমেজ : - moz - লিনিয়ার - গ্রেডিয়েন্ট ( @startColor , @endColor ); // FF 3.6+
- ব্যাকগ্রাউন্ড - ইমেজ : - ms - লিনিয়ার - গ্রেডিয়েন্ট ( @startColor , @endColor ); // IE10
- ব্যাকগ্রাউন্ড - ইমেজ : - ওয়েবকিট - গ্রেডিয়েন্ট ( রৈখিক , বাম উপরে , বাম নীচে , রঙ - স্টপ ( 0 %, @startColor ), রঙ - স্টপ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ব্যাকগ্রাউন্ড - ইমেজ : - ওয়েবকিট - লিনিয়ার - গ্রেডিয়েন্ট ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ব্যাকগ্রাউন্ড - ইমেজ : - o - লিনিয়ার - গ্রেডিয়েন্ট ( @startColor , @endColor ); // অপেরা 11.10
- - ms - ফিল্টার : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- ফিল্টার : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 এবং IE7
- ব্যাকগ্রাউন্ড - ইমেজ : লিনিয়ার - গ্রেডিয়েন্ট ( @startColor , @endColor ); // মান
- }
- . নির্দেশমূলক ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . উল্লম্ব - তিন - রং ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
অপারেশন এবং গ্রিড সিস্টেম
অভিনব হন এবং নীচের মত নমনীয় এবং শক্তিশালী মিশ্রণ তৈরি করতে কিছু গণিত সম্পাদন করুন।
- // গ্রিডিটিউড
- @গ্রিডকলাম : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // গ্রিড সিস্টেম
- . ধারক {
- প্রস্থ : @siteWidth ;
- মার্জিন : 0 স্বয়ংক্রিয় ;
- . clearfix ();
- }
- . কলাম ( @columnSpan : 1 ) {
- প্রদর্শন : ইনলাইন ;
- float : বাম ;
- প্রস্থ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- মার্জিন - বাম : @gridGutterWidth ;
- &: প্রথম - সন্তান {
- মার্জিন - বাম : 0 ;
- }
- }
- . অফসেট ( @columnOffset : 1 ) {
- মার্জিন - বাম : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! গুরুত্বপূর্ণ ;
- }