টুইটার বুটস্ট্র্যাপ

বুটস্ট্র্যাপ হল টুইটারের একটি টুলকিট যা ওয়েবঅ্যাপ এবং সাইটের বিকাশ শুরু করার জন্য ডিজাইন করা হয়েছে।
এতে টাইপোগ্রাফি, ফর্ম, বোতাম, টেবিল, গ্রিড, নেভিগেশন এবং আরও অনেক কিছুর জন্য বেস CSS এবং HTML অন্তর্ভুক্ত রয়েছে।

Nerd সতর্কতা: বুটস্ট্র্যাপ কম দিয়ে তৈরি করা হয়েছে এবং শুধুমাত্র আধুনিক ব্রাউজারগুলিকে মাথায় রেখে গেটের বাইরে কাজ করার জন্য ডিজাইন করা হয়েছে৷

CSS এর হটলিংক

দ্রুত এবং সহজে শুরু করার জন্য, শুধু এই স্নিপেটটি আপনার ওয়েবপৃষ্ঠায় অনুলিপি করুন৷

কম দিয়ে এটি ব্যবহার করুন

কম ব্যবহার করার অনুরাগী? কোন সমস্যা নেই, শুধু রেপো ক্লোন করুন এবং এই লাইনগুলি যোগ করুন:

GitHub-এ কাঁটাচামচ

Github-এ অফিসিয়াল বুটস্ট্র্যাপ রেপো দিয়ে ডাউনলোড, কাঁটাচামচ, টান, ফাইলের সমস্যা এবং আরও অনেক কিছু।

GitHub এ বুটস্ট্র্যাপ »

ডিফল্ট গ্রিড

বুটস্ট্র্যাপের অংশ হিসাবে প্রদত্ত ডিফল্ট গ্রিড সিস্টেম হল একটি 940px চওড়া 16-কলামের গ্রিড। এটি জনপ্রিয় 960 গ্রিড সিস্টেমের একটি স্বাদ, কিন্তু বাম এবং ডান দিকে অতিরিক্ত মার্জিন/প্যাডিং ছাড়াই।

গ্রিড মার্কআপের উদাহরণ

এখানে দেখানো হিসাবে, দুটি "কলাম" দিয়ে একটি মৌলিক লেআউট তৈরি করা যেতে পারে, প্রতিটি 16টি মৌলিক কলামের একটি সংখ্যক বিস্তৃত যা আমরা আমাদের গ্রিড সিস্টেমের অংশ হিসাবে সংজ্ঞায়িত করেছি। আরও বৈচিত্র্যের জন্য নীচের উদাহরণগুলি দেখুন।

<div class="row"> ক্লাস = "সারি" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

অফসেটিং কলাম

8 অফসেট 4

4 অফসেট 4

5 অফসেট 3

10 অফসেট 6

স্থির বিন্যাস

একটি মৌলিক 940px চওড়া, কেন্দ্রীভূত কন্টেইনার লেআউট প্রায় যেকোনো সাইট বা পৃষ্ঠার জন্য।

<body>
  <div class = "container" > 
    ...
  </div>
</body>

তরল লেআউট

একটি নমনীয় তরল বা তরল পৃষ্ঠার গঠন যার সর্বনিম্ন- এবং সর্বোচ্চ-প্রস্থ এবং একটি বাম-হাতে সাইডবার। অ্যাপের জন্য দারুণ।

<body>
  <div class = "container-fluid" > 
    <div ক্লাস = "সাইডবার" > 
      ...
    </div>
    <div ক্লাস = "সামগ্রী" > 
      ...
    </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>

বিবিধ উপাদান

জোর, ঠিকানা, এবং সংক্ষিপ্ত রূপ ব্যবহার করে

<strong> <em> <address> <abbr>

কখন ব্যবহার করতে হবে

জোর ট্যাগ ( <strong>এবং <em>) একটি শব্দ বা শব্দগুচ্ছ এবং এর আশেপাশের অনুলিপির মধ্যে দৃশ্যগত পার্থক্য যোগ করতে ব্যবহার করা উচিত। <strong>সাধারণ পুরানো মনোযোগের <em>জন্য এবং চটকদার মনোযোগ এবং শিরোনামের জন্য ব্যবহার করুন ।

একটি অনুচ্ছেদে জোর দেওয়া

ফুস ড্যাপিবাস , টেলস এসি কার্সাস কমোডো , টরটর মৌরিস কনডিমেন্টাম নিভ , ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। Maecenas faucibus mollis interdum. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু।

ঠিকানা

উপাদানটি addressব্যবহার করা হয়—আপনি অনুমান করেছেন!—ঠিকানাগুলির জন্য। এটি দেখতে কেমন তা এখানে:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

দ্রষ্টব্য: প্রতিটি লাইন addressঅবশ্যই একটি লাইন-ব্রেক ( <br />) দিয়ে শেষ করতে হবে যাতে বিষয়বস্তুকে সঠিকভাবে গঠন করা যায় যেভাবে এটি বাস্তব জীবনে কোনো শৈলী প্রয়োগ ছাড়াই পড়া হয়।

শব্দ সংক্ষেপ

সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য, abbrট্যাগটি ব্যবহার করুন ( HTML5acronym তে অবচয়িত )। ট্যাগের মধ্যে শর্টহ্যান্ড ফর্মটি রাখুন এবং সম্পূর্ণ নামের জন্য একটি শিরোনাম সেট করুন।

ব্লককোট

<blockquote> <p> <cite>

আপনার blockquoteচারপাশে paragraphএবং citeট্যাগ মোড়ানো নিশ্চিত করুন. একটি উৎস উদ্ধৃত করার সময়, citeউপাদান ব্যবহার করুন. CSS স্বয়ংক্রিয়ভাবে একটি em ড্যাশ (—) সহ একটি নামের প্রিফেস করবে।

Lorem ipsum dolor sit amet, consectetur adipisising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
ডাঃ জুলিয়াস হিবার্ট

তালিকা

ক্রমহীন`<ul>`

জেরেমি বিক্সবি
রবার্ট ডিজুর
জোশ ওয়াশিংটন
অ্যান্টন ক্যাপ্রেসি
আমার সহকর্মীবৃন্দ
- জর্জ কাস্তানজা
- জেরি সিনফেল্ড
- কসমো ক্রেমার
- এলেন বেনিস
- নতুন মানুষ
জন জ্যাকব
পল পিয়ার্স
কেভিন গার্নেট

স্টাইলবিহীন`<ul.unstyled>`

জেরেমি বিক্সবি
রবার্ট ডিজুর
জোশ ওয়াশিংটন
অ্যান্টন ক্যাপ্রেসি
আমার সহকর্মীবৃন্দ
- জর্জ কাস্তানজা
- জেরি সিনফেল্ড
- কসমো ক্রেমার
- এলেন বেনিস
- নতুন মানুষ
জন জ্যাকব
পল পিয়ার্স
কেভিন গার্নেট

আদেশ দিয়েছেন`<ol>`

জেরেমি বিক্সবি
রবার্ট ডিজুর
জোশ ওয়াশিংটন
অ্যান্টন ক্যাপ্রেসি
আমার সহকর্মীবৃন্দ
1. জর্জ কাস্তানজা
2. জেরি সিনফেল্ড
3. কসমো ক্রেমার
4. এলেন বেনিস
5. নতুন মানুষ
জন জ্যাকব
পল পিয়ার্স
কেভিন গার্নেট

বর্ণনা`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	স্টু	ডেন্ট	কোড

<table class="common-table zebra-striped">৷ ক্লাস = "সাধারণ-টেবিল জেব্রা-স্ট্রিপড" >
...
</ টেবিল>

উদাহরণ: জেব্রা-স্ট্রিপড w/ TableSorter.js

পূর্ববর্তী উদাহরণ গ্রহণ করে, আমরা jQuery এবং Tablesorter প্লাগইনের মাধ্যমে সাজানোর কার্যকারিতা প্রদান করে আমাদের টেবিলের উপযোগিতা উন্নত করি । সাজানোর পরিবর্তন করতে যেকোনো কলামের হেডারে ক্লিক করুন।

#	নামের প্রথম অংশ	নামের শেষাংশ	ভাষা
1	তোমার	এক	ইংরেজি
2	জো	সিক্স প্যাক	ইংরেজি
3	স্টু	ডেন্ট	কোড

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<স্ক্রিপ্ট প্রকার = "টেক্সট/জাভাস্ক্রিপ্ট" > 
  $ ( নথি )। প্রস্তুত ( ফাংশন () { 
    $ ( "টেবিল#sortTableExample" )। টেবিলসর্টার ( { বাছাই তালিকা : [[ 1 , 0 ]]} );   
  });
</script>
<টেবিল ক্লাস = "সাধারণ-টেবিল জেব্রা-স্ট্রিপড" > 
  ...
</ টেবিল>

স্থির টপবার

এটা কি

আমাদের টপবার হল একটি নির্দিষ্ট বার যাতে একটি ওয়েবসাইটের লোগো বা নাম, প্রাথমিক নেভিগেশন এবং অনুসন্ধান ফর্ম থাকে।

কাস্টমাইজযোগ্য

এর মধ্যে থাকা সমস্ত উপাদান এবং পুরো টপবারও ঐচ্ছিক। আপনি একটি লোগো/নাম, এনএভি, সার্চ এবং একটি সেকেন্ডারি নেভি-অথবা এর যেকোন সমন্বয় অন্তর্ভুক্ত করতে বেছে নিতে পারেন।

ড্রপডাউন অন্তর্ভুক্ত

প্রধান নেভিগেশনের অংশ হিসাবে, আমরা আপনার নেভিগেশনে ড্রপডাউন যোগ করার ক্ষমতা অন্তর্ভুক্ত করেছি। এটি কীভাবে সম্পন্ন হয়েছে তা দেখতে উপরের গৌণ নেভিটি দেখুন (ডান প্রান্তিককৃত)।

ট্যাব এবং বড়ি

একটি দিয়ে সহজ সেকেন্ডারি নেভিগেশন তৈরি করুন ul। উপযুক্ত শ্রেণী যোগ করে ট্যাব বা বড়ির মধ্যে অদলবদল করুন।

আমাদের অ্যাকাউন্ট সেটিংস পৃষ্ঠা এবং লাইক কন্টেন্টের পৃষ্ঠাগুলির মধ্যে টগল করার জন্য ব্যবহারকারীর টাইমলাইনের মতো বিষয়বস্তুর উপ-বিভাগের জন্য দুর্দান্ত। ট্যাবড বা পিল শৈলী পাওয়া যায়.

<ul class="tabs"> ক্লাস = "ট্যাব" >
  <li class = "active" ><a href = "" > হোম </a></li>  
  < li><a href=""> প্রোফাইল </a> < / li > 
  <li><a href="" > বার্তা </a> </li> ৷ 
  < li><a href=""> সেটিংস </a> < / li > 
  < li > <a href=""> যোগাযোগ </a></li > 
</ul>

<ul class="pills"> ক্লাস = "পিলস" >
  <li class = "active" ><a href = "" > হোম </a></li>  
  < li><a href=""> প্রোফাইল </a> < / li > 
  <li><a href="" > বার্তা </a> </li> ৷ 
  < li><a href=""> সেটিংস </a> < / li > 
  < li > <a href=""> যোগাযোগ </a></li > 
</ul>

পৃষ্ঠা সংখ্যা

Rdio দ্বারা অনুপ্রাণিত অতি সরল এবং ন্যূনতম স্টাইলযুক্ত পৃষ্ঠা সংখ্যা। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।

<div class="পৃষ্ঠাকরণ"> ক্লাস = "পৃষ্ঠা সংখ্যা" >
  <ul>
    < li class = "prev disabled" ><a href="" > &larr ; আগের </a></li>  
    <li ক্লাস = "সক্রিয়" ><a href = "" > 1 </a></li>  
    <li><a href="" > 2 </a> </li> ৷ 
    <li><a href="" > 3 </a> </li > 
    <li><a href="" > 4 </a> </li > 
    <li><a href="" > 5 </a> </li > 
    < li class = "next" ><a href="" > পরবর্তী &rarr ; </a></li>  
  </ul>
</div>

মৌলিক সতর্কতা

ব্যর্থতা, সম্ভাব্য ব্যর্থতা, বা একটি কর্মের সাফল্য হাইলাইট করার জন্য এক-লাইন বার্তা। ফর্ম জন্য বিশেষভাবে দরকারী.

ওহ স্ন্যাপ! এটি এবং এটি পরিবর্তন করুন এবং আবার চেষ্টা করুন।

পবিত্র গাউকামোল! নিজেকে ভালো করে দেখুন, আপনি খুব ভালো দেখাচ্ছেন না।

সাবাশ! আপনি সফলভাবে এই সতর্কতা বার্তা পড়েছেন৷

মাথা আপ! এটি একটি সতর্কতা যা আপনার মনোযোগের প্রয়োজন, কিন্তু এটি এখনও একটি বিশাল অগ্রাধিকার নয়৷

বার্তা ব্লক করুন

যে বার্তাগুলির জন্য কিছুটা ব্যাখ্যা প্রয়োজন, আমাদের কাছে অনুচ্ছেদ শৈলী সতর্কতা রয়েছে৷ এগুলি দীর্ঘ ত্রুটি বার্তাগুলিকে বুদবুদ করার জন্য, একটি মুলতুবি ক্রিয়া সম্পর্কে ব্যবহারকারীকে সতর্ক করার জন্য বা পৃষ্ঠায় আরও জোর দেওয়ার জন্য তথ্য উপস্থাপনের জন্য উপযুক্ত।

ওহ স্ন্যাপ! আপনি একটি ত্রুটি পেয়েছেন!এটি এবং এটি পরিবর্তন করুন এবং আবার চেষ্টা করুন। Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

এই ব্যবস্থা নিন অথবা এই কাজ

পবিত্র গাউকামোল! এটি একটি সতর্কতা!নিজেকে ভালো করে দেখুন, আপনি খুব ভালো দেখাচ্ছেন না। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। প্রেজেন্ট কমোডো কার্সাস ম্যাগনা, vel scelerisque nisl consectetur et.

এই ব্যবস্থা নিন অথবা এই কাজ

সাবাশ!আপনি সফলভাবে এই সতর্কতা বার্তা পড়েছেন৷ সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Maecenas faucibus mollis interdum.

এই ব্যবস্থা নিন অথবা এই কাজ

মাথা আপ!এটি একটি সতর্কতা যা আপনার মনোযোগের প্রয়োজন, কিন্তু এটি এখনও একটি বিশাল অগ্রাধিকার নয়৷

এই ব্যবস্থা নিন অথবা এই কাজ

মডেল

মোডাল—সংলাপ বা লাইটবক্স—এমন পরিস্থিতিতে প্রাসঙ্গিক ক্রিয়াগুলির জন্য দুর্দান্ত যেখানে পটভূমির প্রসঙ্গ বজায় রাখা গুরুত্বপূর্ণ৷

টুল টিপস

একটি বিভ্রান্ত ব্যবহারকারীকে সাহায্য করার জন্য এবং তাদের সঠিক দিকে নির্দেশ করার জন্য 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 প্রিপ্রসেসর।

বুটস্ট্র্যাপে আমরা কীভাবে প্রিবুট ব্যবহার করেছি এবং আপনার পরবর্তী প্রোজেক্টে কম চালানোর জন্য আপনি কীভাবে এটি ব্যবহার করতে পারেন তা দেখুন।

এটি কিভাবে ব্যবহার করতে

আপনার ব্রাউজারে জাভাস্ক্রিপ্টের মাধ্যমে বুটস্ট্র্যাপের কম ভেরিয়েবল, মিক্সিন এবং সিএসএস-এ নেস্টিংয়ের সম্পূর্ণ ব্যবহার করতে এই বিকল্পটি ব্যবহার করুন।

<link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" মিডিয়া = "সমস্ত" />     
<script type = "text/javascript" 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 ;

মন্তব্য করছেন

/* ... */CSS-এর স্বাভাবিক সিনট্যাক্স ছাড়াও কম মন্তব্য করার আরেকটি স্টাইল প্রদান করে ।

// এটি একটি মন্তব্য
/* এটিও একটি মন্তব্য */

ওজুতে মিশ্রিত করে

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 )) ! গুরুত্বপূর্ণ ;          
}

বুটস্ট্র্যাপ

টুইটার বুটস্ট্র্যাপ

CSS এর হটলিংক

কম দিয়ে এটি ব্যবহার করুন

GitHub-এ কাঁটাচামচ

গ্রিড সিস্টেম স্ট্যান্ডার্ড 940px রক করুন বা আপনার নিজের রোল করুন

ডিফল্ট গ্রিড

গ্রিড মার্কআপের উদাহরণ

অফসেটিং কলাম

ওয়েবপেজ তৈরির জন্য লেআউট বেসিক টেমপ্লেট

স্থির বিন্যাস

তরল লেআউট

টাইপোগ্রাফি শিরোনাম, অনুচ্ছেদ, তালিকা এবং অন্যান্য ইনলাইন টাইপ উপাদান

শিরোনাম এবং অনুলিপি

h1. শিরোনাম 1

h2. শিরোনাম 2

h3. শিরোনাম 3

h4. শিরোনাম 4

h5. শিরোনাম 5

h6. শিরোনাম 6

উদাহরণ অনুচ্ছেদ

উদাহরণ শিরোনামের উপ-শিরোনাম আছে...

বিবিধ উপাদান

কখন ব্যবহার করতে হবে

একটি অনুচ্ছেদে জোর দেওয়া

ঠিকানা

শব্দ সংক্ষেপ

ব্লককোট

তালিকা

ক্রমহীন<ul>

স্টাইলবিহীন<ul.unstyled>

আদেশ দিয়েছেন<ol>

বর্ণনাdl

টেবিলের জন্য, আপনি এটি অনুমান করেছেন, ট্যাবুলার ডেটা

বিল্ডিং টেবিল

উদাহরণ: ডিফল্ট টেবিল শৈলী

উদাহরণ: জেব্রা-ডোরাকাটা

উদাহরণ: জেব্রা-স্ট্রিপড w/ TableSorter.js

ফর্ম

ডিফল্ট শৈলী

স্তুপীকৃত ফর্ম

বোতাম

উদাহরণ বোতাম

বিকল্প মাপ

প্রতিবন্ধী রাষ্ট্র

লিঙ্ক

বোতাম

নেভিগেশন

স্থির টপবার

প্রকল্পের নাম

এটা কি

কাস্টমাইজযোগ্য

ড্রপডাউন অন্তর্ভুক্ত

ট্যাব এবং বড়ি

পৃষ্ঠা সংখ্যা

সাফল্য, সতর্কতা, এবং ত্রুটি বার্তা বা সতর্কতার জন্য সতর্কতা এবং ত্রুটি শৈলী

মৌলিক সতর্কতা

বার্তা ব্লক করুন

মডেল, টুলটিপস এবং পপোভারে সামগ্রী প্রদর্শনের জন্য পপোভার উপাদান

মডেল

মডেল শিরোনাম

টুল টিপস

পপোভারস

পপওভার শিরোনাম

কম সুপারচার্জ সহ বুটস্ট্র্যাপ ব্যবহার করে ভেরিয়েবল, মিক্সিন এবং ফাংশন সহ আপনার CSS করুন

এটি কিভাবে ব্যবহার করতে

কি অন্তর্ভুক্ত

রঙ পরিবর্তনশীল

মন্তব্য করছেন

ওজুতে মিশ্রিত করে

ফন্ট স্ট্যাক

গ্রেডিয়েন্ট

অপারেশন এবং গ্রিড সিস্টেম

ক্রমহীন`<ul>`

স্টাইলবিহীন`<ul.unstyled>`

আদেশ দিয়েছেন`<ol>`

বর্ণনা`dl`