ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড। মেচেনাছ ফ’চিবাছ মলিছ ইন্টাৰডাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
বুটষ্ট্ৰেপ হৈছে টুইটাৰৰ পৰা এটা সঁজুলিকিট যিটো ৱেবএপ আৰু চাইটসমূহৰ বিকাশৰ কিকষ্টাৰ্ট কৰিবলৈ ডিজাইন কৰা হৈছে।
ইয়াত টাইপোগ্ৰাফী, প্ৰপত্ৰ, বুটাম, টেবুল, গ্ৰীড, নেভিগেচন, আৰু অধিক ৰ বাবে ভিত্তি CSS আৰু HTML অন্তৰ্ভুক্ত কৰা হৈছে।
Nerd alert: Bootstrap Less ৰ সৈতে নিৰ্মিত আৰু আধুনিক ব্ৰাউজাৰসমূহ মনত ৰাখি গেটৰ বাহিৰত কাম কৰিবলৈ ডিজাইন কৰা হৈছিল।
দ্ৰুত আৰু সহজ আৰম্ভণিৰ বাবে, মাত্ৰ এই স্নিপেটটো আপোনাৰ ৱেবপেজত কপি কৰক।
লেছ ব্যৱহাৰ কৰাৰ এজন অনুৰাগী? কোনো সমস্যা নাই, মাত্ৰ repo ক্ল'ন কৰক আৰু এই শাৰীসমূহ যোগ কৰক:
Github ত অফিচিয়েল Bootstrap repo ৰ সৈতে ডাউনলোড, ফৰ্ক, পুল, ফাইল সমস্যা, আৰু অধিক।
বৰ্তমান v1.3.0
টুইটাৰৰ অভিযন্তাসকলে ঐতিহাসিকভাৱে ফ্ৰন্ট-এণ্ডৰ প্ৰয়োজনীয়তা পূৰণৰ বাবে তেওঁলোকৰ চিনাকি প্ৰায় যিকোনো লাইব্ৰেৰী ব্যৱহাৰ কৰি আহিছে। বুটষ্ট্ৰেপ আৰম্ভ হৈছিল উপস্থাপন কৰা প্ৰত্যাহ্বানসমূহৰ উত্তৰ হিচাপে। বহুতো ভয়ংকৰ লোকৰ সহায়ত Bootstrap যথেষ্ট বৃদ্ধি পাইছে।
dev.twitter.com ত অধিক পঢ়ক ›
বুটষ্ট্ৰেপ Chrome, Safari, Internet Explorer, আৰু Firefox ৰ দৰে প্ৰধান আধুনিক ব্ৰাউজাৰসমূহত পৰীক্ষা আৰু সমৰ্থিত।
বুটষ্ট্ৰেপ কমপাইল কৰা CSS, অকম্পাইল কৰা, আৰু উদাহৰণ সাঁচসমূহৰ সৈতে সম্পূৰ্ণ আহে ।
বুটষ্ট্ৰেপৰ অংশ হিচাপে প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী এটা 940px বহল 16-স্তম্ভ গ্ৰীড । ই জনপ্ৰিয় ৯৬০ গ্ৰীড ব্যৱস্থাৰ এটা সোৱাদ, কিন্তু বাওঁ আৰু সোঁফালে অতিৰিক্ত মাৰ্জিন/পেডিং নোহোৱাকৈ।
ইয়াত দেখুওৱাৰ দৰে, দুটা "স্তম্ভ"ৰ সৈতে এটা মূল পৰিকল্পনা সৃষ্টি কৰিব পাৰি, প্ৰত্যেকেই আমি আমাৰ গ্ৰীড ব্যৱস্থাৰ অংশ হিচাপে সংজ্ঞায়িত কৰা ১৬টা মূল স্তম্ভৰ এটা সংখ্যাক সামৰি লৈছে। অধিক ভিন্নতাৰ বাবে তলৰ উদাহৰণসমূহ চাওক।
- <div শ্ৰেণী = "শাৰী" >
- <div শ্ৰেণী = "span6" >
- ...
- </div>
- <div শ্ৰেণী = "span10" >
- ...
- </div>
- </div>
.row
এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত এটা সৃষ্টি কৰি যদি আপুনি কৰিবলগীয়া হয় তেন্তে আপোনাৰ বিষয়বস্তু নেষ্ট কৰক ।
- <div শ্ৰেণী = "শাৰী" >
- <div শ্ৰেণী = "span12" >
- স্তম্ভৰ স্তৰ ১
- <div শ্ৰেণী = "শাৰী" >
- <div শ্ৰেণী = "span6" >
- স্তৰ ২
- </div>
- <div শ্ৰেণী = "span6" >
- স্তৰ ২
- </div>
- </div>
- </div>
- </div>
বুটষ্ট্ৰেপত নিৰ্মিত হৈছে অবিকল্পিত 940px গ্ৰীড ব্যৱস্থাপ্ৰণালী স্বনিৰ্বাচিত কৰাৰ বাবে এটা মুষ্টিমেয় চলক। অলপ স্বনিৰ্বাচনৰ সৈতে, আপুনি স্তম্ভসমূহৰ আকাৰ, সিহতৰ নালাসমূহ, আৰু সিহঁতে বাস কৰা পাত্ৰ পৰিবৰ্তন কৰিব পাৰিব।
গ্ৰীড ব্যৱস্থাপ্ৰণালী পৰিবৰ্তন কৰিবলে প্ৰয়োজনীয় চলকসমূহ বৰ্তমান সকলো preboot.less
.
লৰৃ - চৰ হৈ থকা | অবিকল্পিত মান | বিৱৰণ |
---|---|---|
@gridColumns |
১৬ | গ্ৰীডৰ ভিতৰত স্তম্ভৰ সংখ্যা |
@gridColumnWidth |
৪০পিক্সেল | গ্ৰীডৰ ভিতৰত প্ৰতিটো স্তম্ভৰ প্ৰস্থ |
@gridGutterWidth |
২০পিক্সেল | প্ৰতিটো স্তম্ভৰ মাজৰ ঋণাত্মক স্থান |
@siteWidth |
সকলো স্তম্ভ আৰু নালাৰ গণনা কৰা যোগফল | আমি স্তম্ভ আৰু নালাৰ সংখ্যা গণনা কৰিবলৈ আৰু .fixed-container() মিক্সিনৰ প্ৰস্থ নিৰ্ধাৰণ কৰিবলৈ কিছুমান মৌলিক মিল ব্যৱহাৰ কৰো। |
গ্ৰীড পৰিবৰ্তন কৰাৰ অৰ্থ হ'ল তিনিটা @grid-*
চলক সলনি কৰা আৰু কম নথিপত্ৰসমূহ পুনৰ কম্পাইলিং কৰা।
বুটষ্ট্ৰেপ ২৪ টা স্তম্ভলৈকে এটা গ্ৰীড ব্যৱস্থাপ্ৰণালী নিয়ন্ত্ৰণ কৰিবলে সজ্জিত আহে; অবিকল্পিত মাত্ৰ 16। ইয়াত আপোনাৰ গ্ৰীড চলকসমূহ এটা 24-স্তম্ভ গ্ৰীডলৈ স্বনিৰ্বাচিত কৰা কেনেকৈ দেখা যাব।
- @gridColumns : ২৪ ;
- @গ্ৰিডস্তম্ভৰ প্ৰস্থ : ২০px ;
- @গ্ৰিডগাটাৰপ্ৰস্থ : ২০px ;
এবাৰ পুনৰ কম্পাইল কৰিলে, আপুনি ছেট হ’ব!
এটাই প্ৰদান কৰা প্ৰায় যিকোনো ৱেবছাইট বা পৃষ্ঠাৰ বাবে অবিকল্পিত আৰু সহজ 940px-ব্যাপী, কেন্দ্ৰীভূত বিন্যাস <div.container>
।
- <শৰীৰ>
- <div class = "পাত্ৰ" >
- ...
- </div>
- </body>
নূন্যতম আৰু সৰ্বোচ্চ-প্ৰস্থ আৰু এটা বাওঁফালৰ কাষবাৰৰ সৈতে এটা বিকল্প, নমনীয় তৰল পৃষ্ঠা গঠন। এপ আৰু ডক্সৰ বাবে অতি উত্তম।
- <শৰীৰ>
- <div class = "পাত্ৰ-তৰল" >
- <div class = "চাইডবাৰ" >
- ...
- </div>
- <div class = "সামগ্ৰী" >
- ...
- </div>
- </div>
- </body>
আপোনাৰ ৱেবপৃষ্ঠাসমূহ গঠন কৰাৰ বাবে এটা প্ৰামাণিক টাইপোগ্ৰাফিক হাইৰাৰ্কি।
সম্পূৰ্ণ টাইপোগ্ৰাফিক গ্ৰীড আমাৰ preboot.less নথিপত্ৰত দুটা Less চলকৰ ওপৰত ভিত্তি কৰি কৰা হৈছে: @basefont
আৰু @baseline
. প্ৰথমটো হৈছে গোটেইখিনিতে ব্যৱহৃত ভিত্তি ফন্ট-আকাৰ আৰু দ্বিতীয়টো হৈছে ভিত্তি ৰেখা-উচ্চতা।
আমি সেই চলকসমূহ ব্যৱহাৰ কৰো, আৰু কিছুমান গণিত, আমাৰ সকলো ধৰণৰ আৰু অধিক মাৰ্জিন, পেডিং, আৰু লাইন-উচ্চতা সৃষ্টি কৰিবলৈ।
নুল্লম কুইছ ৰিছুছ এগেট উৰ্না মলিছ অৰ্নাৰে ভেল ইউ লিও। Cum sociis natoque পেনাটিবাছ এট মেগনিছ ডি পাৰ্চুৰিয়েন্ট মন্টেছ, নাচেটাৰ ৰিডিকুলাছ মুছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।
জোৰ, ঠিকনা, & সংক্ষিপ্তকৰণ ব্যৱহাৰ কৰা
<strong>
<em>
<address>
<abbr>
এটা শব্দ বা বাক্যাংশৰ চাৰিওফালৰ কপিৰ তুলনাত অতিৰিক্ত গুৰুত্ব বা গুৰুত্ব সূচাবলৈ জোৰ দিয়া টেগ ( <strong>
আৰু ) ব্যৱহাৰ কৰিব লাগে। গুৰুত্বৰ বাবে আৰু মানসিক চাপৰ<em>
ওপৰত গুৰুত্ব দিয়াৰ বাবে ব্যৱহাৰ কৰক ।<strong>
<em>
Fusce dapibus , tellus ac cursus commodo , tortor mauris কণ্ডিমেণ্টাম নিভ , উট ফাৰ্মেণ্টাম মাছা জষ্টো বহি আমেত ৰিছুছ। মেচেনাছ ফ’চিবাছ মলিছ ইন্টাৰডাম। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু।
টোকা:<b>
HTML5 ত আৰু টেগ ব্যৱহাৰ কৰাটো এতিয়াও ঠিকেই আছে <i>
আৰু সেইবোৰ ক্ৰমে গাঢ় আৰু ইটালিক ষ্টাইল কৰিব নালাগে (যদিও যদি অধিক অৰ্থবোধক উপাদান আছে, ইয়াক ব্যৱহাৰ কৰক)। <b>
অতিৰিক্ত গুৰুত্ব নিদিয়াকৈ শব্দ বা বাক্যাংশক উজ্জ্বল কৰিবলৈ বুজায়, আনহাতে <i>
ই বেছিভাগেই কণ্ঠ, কাৰিকৰী শব্দ আদিৰ বাবে।
মৌলটো ইয়াৰ <address>
ওচৰৰ পূৰ্বপুৰুষৰ বাবে যোগাযোগৰ তথ্যৰ বাবে ব্যৱহাৰ কৰা হয়, বা সমগ্ৰ কামৰ শৰীৰটোৰ বাবে। ইয়াক কেনেকৈ ব্যৱহাৰ কৰিব পাৰি তাৰ দুটা উদাহৰণ দিলোঁ:
টোকা: এটা শাৰীৰ প্ৰতিটো শাৰী <address>
এটা শাৰী-বিৰতি ( <br />
) ৰে শেষ কৰিব লাগিব বা এটা ব্লক-স্তৰৰ টেগত মেৰিয়াই ল'ব লাগিব (যেনে, <p>
) বিষয়বস্তু সঠিকভাৱে গঠন কৰিবলে।
সংক্ষিপ্তকৰণ আৰু সংক্ষিপ্ত ৰূপৰ বাবে, <abbr>
টেগ ব্যৱহাৰ কৰক ( HTML5<acronym>
ত অবচিত )। টেগৰ ভিতৰত চৰ্টহেণ্ড ফৰ্মটো ৰাখক আৰু সম্পূৰ্ণ নামৰ বাবে এটা শিৰোনাম নিৰ্ধাৰণ কৰক।
<blockquote>
<p>
<small>
এটা ব্লককোট অন্তৰ্ভুক্ত কৰিবলৈ, ৰেপ কৰক আৰু <blockquote>
টেগ কৰক। আপোনাৰ উৎস উদ্ধৃতি দিবলৈ উপাদানটো ব্যৱহাৰ কৰক আৰু আপুনি ইয়াৰ আগতে এটা em ডেচ পাব।<p>
<small>
<small>
—
লৰেম ইপ্সম ডলৰ বহা আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis dapibus posuere velit alicet.
ডাঃ জুলিয়াছ হিবাৰ্ট
- <ব্লককোট>
- <p> লৰেম ইপচুম ডলৰ বহি আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis dapibus posuere velit alicet. </p>
- <small> ডাঃ জুলিয়াছ হিবাৰ্ট </small>
- </blockquote> ৰ দ্বাৰা প্ৰকাশিত
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
দুটা সহজ টেগৰ সৈতে শৈলীত আপোনাৰ ক'ড পিম্প কৰক। জাভাস্ক্রিপ্টৰ জৰিয়তে আৰু অধিক ভয়ংকৰতাৰ বাবে, Google ৰ ক'ড prettify লাইব্ৰেৰীত ড্ৰপ কৰক আৰু আপুনি ছেট কৰা হৈছে৷
ক'ড, ব্লকসমূহ বা কেৱল ইনলাইন স্নিপেটসমূহ, সঠিক টেগত ৰেপিং কৰি শৈলীৰ সৈতে প্ৰদৰ্শন কৰিব পাৰি। একাধিক শাৰীত বিস্তৃত ক'ডৰ ব্লকৰ বাবে, <pre>
উপাদানটো ব্যৱহাৰ কৰক। ইনলাইন ক'ডৰ বাবে, <code>
উপাদানটো ব্যৱহাৰ কৰক।
উপাদান | ফলাফল |
---|---|
<code> |
এনেধৰণৰ লিখনীৰ এটা শাৰীত, আপোনাৰ ৰেপড ক'ড এই >html< উপাদানৰ দৰে দেখা যাব। |
<pre> |
<div> <h1>শিৰোনামা</h1> <p>ইয়াত কিবা এটা...</p> </div> টোকা: টেগসমূহৰ ভিতৰত ক'ড নিশ্চিতভাৱে |
<pre class="prettyprint"> |
google-code-prettify লাইব্ৰেৰী ব্যৱহাৰ কৰি, আপুনি ক'ডৰ ব্লকসমূহে এটা অলপ বেলেগ দৃশ্যমান শৈলী আৰু স্বয়ংক্ৰিয় বাক্যবিন্যাস হাইলাইটিং পায়। <div> <h1> শিৰোনাম </h1> <p> ইয়াত ঠিক কিবা এটা... </p> </div> google-code-prettify ডাউনলোড কৰক আৰু কেনেকৈ ব্যৱহাৰ কৰিব লাগে তাৰ বাবে readme চাওক। |
<span class="label">
আপোনাৰ শৰীৰৰ লিখনিত যিকোনো বাক্যাংশৰ প্ৰতি মনোযোগ আকৰ্ষণ কৰক বা ফ্লেগ কৰক।
কেতিয়াবা সেই আড়ম্বৰপূৰ্ণ New! বা ক'ড লিখাৰ সময়ত গুৰুত্বপূৰ্ণ ফ্লেগসমূহ? বাৰু, এতিয়া তোমাৰ হাতত সেইবোৰ আছে। ইয়াত অবিকল্পিতভাৱে কি অন্তৰ্ভুক্ত কৰা হৈছে:
লেবেল | ফলাফল |
---|---|
<span class="label">Default</span> |
ডিফল্ট |
<span class="label success">New</span> |
নতুন |
<span class="label warning">Warning</span> |
সতৰ্কবাণী |
<span class="label important">Important</span> |
গুৰুত্বপূৰ্ণ |
<span class="label notice">Notice</span> |
জাননী |
কম HTML ফুটপ্ৰিণ্ট আৰু নূন্যতম শৈলীৰ সৈতে পৃষ্ঠাসমূহত বিভিন্ন আকাৰৰ থাম্বনেইলসমূহ প্ৰদৰ্শন কৰক।
থাম্বনেইলসমূহ .media-grid
যিকোনো আকাৰৰ হ'ব পাৰে, কিন্তু সিহঁতে সৰ্বোত্তম কাম কৰে যেতিয়া অন্তৰ্নিৰ্মিত বুটষ্ট্ৰেপ গ্ৰীড ব্যৱস্থাপ্ৰণালীলৈ প্ৰত্যক্ষভাৱে মেপ কৰা হয় । .span2
90, 210, আৰু 330 ৰ দৰে ছবিৰ প্ৰস্থই , .span4
, আৰু .span6
স্তম্ভৰ আকাৰ সমান কৰিবলৈ পেডিঙৰ কেইটামান পিক্সেলৰ সৈতে একত্ৰিত হয় ।
মিডিয়া গ্ৰীডসমূহ ব্যৱহাৰ কৰাটো সহজ আৰু মাৰ্কআপ ফালে যথেষ্ট সহজ। ইহঁতৰ মাত্ৰাসমূহ বিশুদ্ধভাৱে অন্তৰ্ভুক্ত কৰা ছবিসমূহৰ আকাৰৰ ওপৰত ভিত্তি কৰি কৰা হয়।
- <ul class = "মিডিয়া-গ্ৰিড" >
- <li>
- <a href = "#" >
- <img class = "থাম্বনেইল" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "থাম্বনেইল" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
টেবুলবোৰ বৰ ভাল—বহু কামৰ বাবে। গ্ৰেট টেবুলসমূহ, অৱশ্যে, উপযোগী, স্কেলেবল, আৰু পঢ়িব পৰা (ক'ড স্তৰত) হ'বলৈ অলপ মাৰ্কআপ প্ৰেমৰ প্ৰয়োজন। সহায়ক হোৱাকৈ কেইটামান টিপছ আগবঢ়োৱা হ’ল।
আপোনাৰ স্তম্ভ হেডাৰসমূহ সদায় <thead>
এনেদৰে ৰেপ কৰক যে হাইৰাৰ্কি <thead>
> <tr>
> হয় <th>
।
স্তম্ভ হেডাৰসমূহৰ দৰেই, আপোনাৰ টেবুলৰ সকলো মূখ্য বিষয়বস্তু এটা ত ৰেপ কৰিব লাগে <tbody>
যাতে আপোনাৰ হাইৰাৰ্কি <tbody>
> <tr>
> হয় <td>
।
সকলো টেবুল স্বয়ংক্ৰিয়ভাৱে কেৱল প্ৰয়োজনীয় সীমাসমূহৰ সৈতে ষ্টাইল কৰা হ'ব যাতে পঠনযোগ্যতা নিশ্চিত কৰিব পাৰি আৰু গঠন ৰক্ষণাবেক্ষণ কৰিব পাৰি। অতিৰিক্ত শ্ৰেণী বা বৈশিষ্ট্য যোগ কৰাৰ প্ৰয়োজন নাই।
# | প্ৰথম নাম | উপাধি | ভাষা |
---|---|---|---|
১ | কিছুমান | এক | ইংৰাজী |
২ | জো | ছিক্সপেক | ইংৰাজী |
৩ | Stu | ডেন্ট | ক'ড |
- <টেবুল>
- ...
- </table>
জেব্ৰা-ষ্ট্ৰাইপিং যোগ কৰি আপোনাৰ টেবুলসমূহৰ সৈতে অলপ আড়ম্বৰপূৰ্ণ হওক—মাত্ৰ .zebra-striped
ক্লাছটো যোগ কৰক।
# | প্ৰথম নাম | উপাধি | ভাষা |
---|---|---|---|
১ | কিছুমান | এক | ইংৰাজী |
২ | জো | ছিক্সপেক | ইংৰাজী |
৩ | Stu | ডেন্ট | ক'ড |
টোকা: Zebra-striping এটা প্ৰগতিশীল উন্নয়ন IE8 আৰু তলৰ দৰে পুৰণি ব্ৰাউজাৰৰ বাবে উপলব্ধ নহয়।
- <table class = "জেব্ৰা-ষ্ট্ৰাইপড" >
- ...
- </table>
পূৰ্বৰ উদাহৰণটো লৈ, আমি jQuery আৰু Tablesorter প্লাগইনৰ যোগেদি সজাই পৰাই তোলা কাৰ্য্যকৰীতা প্ৰদান কৰি আমাৰ টেবুলসমূহৰ উপযোগিতা উন্নত কৰোঁ । সজাই পৰাই তুলিবলৈ যিকোনো স্তম্ভৰ হেডাৰত ক্লিক কৰক।
# | প্ৰথম নাম | উপাধি | ভাষা |
---|---|---|---|
২ | জো | ছিক্সপেক | ইংৰাজী |
৩ | Stu | ডেন্ট | ক'ড |
১ | আপোনাৰ | এক | ইংৰাজী |
- <script src = "js/jquery/jquery.টেবুলসৰ্টাৰ.মিন.জেএছ" ></script>
- <স্ক্রিপ্ট >
- $ ( ফাংচন () {
- $ ( "টেবুল#sortটেবুলউদাহৰণ" ). টেবুলছৰ্টাৰ ({ সৰ্টলিষ্ট : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "জেব্ৰা-ষ্ট্ৰাইপড" >
- ...
- </table>
সকলো প্ৰপত্ৰক অবিকল্পিত শৈলী দিয়া হৈছে সিহতক এটা পঢ়িব পৰা আৰু স্কেলেবল ধৰণে উপস্থাপন কৰিবলে। লিখনী ইনপুটসমূহ, নিৰ্ব্বাচন তালিকাসমূহ, লিখনী অঞ্চলসমূহ, ৰেডিঅ' বুটামসমূহ আৰু চেকবাকচসমূহ, আৰু বুটামসমূহৰ বাবে শৈলীসমূহ প্ৰদান কৰা হৈছে।
আপোনাৰ প্ৰপত্ৰৰ HTML ত যোগ কৰক .form-stacked
আৰু আপুনি তেওঁলোকৰ বাওঁফালে নহয়, তেওঁলোকৰ ক্ষেত্ৰসমূহৰ ওপৰত লেবেলসমূহ পাব। আপোনাৰ প্ৰপত্ৰসমূহ চুটি হ'লে বা গধুৰ প্ৰপত্ৰসমূহৰ বাবে আপোনাৰ ইনপুটৰ দুটা স্তম্ভ থাকিলে ই অতি উত্তম কাম কৰে।
যিকোনো প্ৰপত্ৰ input
, select
, বা কাষ্টমাইজ কৰকtextarea
আপোনাৰ মাৰ্কআপত মাত্ৰ কেইটামান শ্ৰেণী যোগ কৰি
v1.3.0 ৰ পৰা, আমি ফৰ্ম উপাদানসমূহৰ বাবে গ্ৰীড-ভিত্তিক আকাৰ নিৰ্ধাৰণ শ্ৰেণীসমূহ যোগ কৰিছো। অনুগ্ৰহ কৰি বৰ্তমানৰ .mini
, .small
, ইত্যাদি শ্ৰেণীসমূহৰ ওপৰত এইবোৰ ব্যৱহাৰ কৰক।
এটা নিয়ম হিচাপে, বুটামসমূহ কাৰ্য্যসমূহৰ বাবে ব্যৱহাৰ কৰা হয় আনহাতে সংযোগসমূহ বস্তুসমূহৰ বাবে ব্যৱহাৰ কৰা হয়। উদাহৰণস্বৰূপে, "ডাউনলোড" এটা বুটাম হ'ব পাৰে আৰু "শেহতীয়া কাৰ্য্যকলাপ" এটা সংযোগ হ'ব পাৰে।
সকলো বুটাম অবিকল্পিতভাৱে এটা পাতল ধূসৰ শৈলীলৈ, কিন্তু বিভিন্ন ৰঙৰ শৈলীৰ বাবে বহুতো কাৰ্য্যকৰী শ্ৰেণী প্ৰয়োগ কৰিব পাৰি। এই শ্ৰেণীসমূহৰ ভিতৰত আছে নীলা .primary
শ্ৰেণী, পাতল নীলা .info
শ্ৰেণী, সেউজীয়া .success
শ্ৰেণী, ৰঙা .danger
শ্ৰেণী।
বুটাম শৈলীসমূহ প্ৰয়োগ কৰা যিকোনো বস্তুত প্ৰয়োগ কৰিব পাৰি .btn
। <a>
সাধাৰণতে আপুনি এইবোৰ কেৱল , <button>
, আৰু নিৰ্ব্বাচন <input>
উপাদানসমূহত প্ৰয়োগ কৰিব বিচাৰিব । ইয়াত কেনেকুৱা দেখা যায়:
ডাঙৰ বা সৰু বুটামৰ আড়ম্বৰপূৰ্ণ? ইয়াত আছে!
যিবোৰ বুটাম সক্ৰিয় নহয় বা এটা বা আন এটা কাৰণত এপটোৱে নিষ্ক্ৰিয় কৰিছে, সেইবোৰৰ বাবে নিষ্ক্ৰিয় অৱস্থা ব্যৱহাৰ কৰক। সেইটো .disabled
লিংকৰ বাবে আৰু উপাদানৰ :disabled
বাবে ।<button>
.alert-message
এটা কাৰ্য্যৰ বিফলতা, সম্ভাৱ্য বিফলতা, বা সফলতা আলোকপাত কৰাৰ বাবে এক-শাৰী বাৰ্তাসমূহ। বিশেষকৈ ফৰ্মৰ বাবে উপযোগী।
- <div class = "সতৰ্কতা-বাৰ্তা সতৰ্কবাণী" >
- <a class = "বন্ধ কৰক" href = "#" > × </a>
- <p><strong> পবিত্ৰ গুয়াকামোল! </strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই। </p>
- </div>
.alert-message.block-message
যিবোৰ বাৰ্তাৰ বাবে অলপ ব্যাখ্যাৰ প্ৰয়োজন হয়, সেইবোৰৰ বাবে আমাৰ ওচৰত অনুচ্ছেদ শৈলী সতৰ্কবাণী আছে। এইবোৰ দীঘলীয়া ভুল বাৰ্তাসমূহ বাবল আপ কৰাৰ বাবে, এটা ব্যৱহাৰকাৰীক এটা বাকী থকা কাৰ্য্যৰ বিষয়ে সতৰ্ক কৰি দিয়াৰ বাবে, বা কেৱল পৃষ্ঠাত অধিক জোৰ দিয়াৰ বাবে তথ্য উপস্থাপন কৰাৰ বাবে নিখুঁত।
- <div class = "সতৰ্কতা-বাৰ্তা ব্লক-বাৰ্তা সতৰ্কবাণী" >
- <a class = "বন্ধ কৰক" href = "#" > × </a>
- <p><strong> পবিত্ৰ গুয়াকামোল! এইটো এটা সতৰ্কবাণী! </strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। </p>
- <div class = "সতৰ্কতা-কাৰ্য্যসমূহ" >
- <a class = "btn small" href = "#" > এই কাৰ্য্য কৰক </a> <a class = "btn small" href = "#" > বা এইটো কৰক </a>
- </div>
- </div>
মডালসমূহ—সংলাপসমূহ বা লাইটবক্সসমূহ—প্ৰসংগভিত্তিক কাৰ্য্যসমূহৰ বাবে অতি উত্তম যিবোৰ পৰিস্থিতিত পটভূমি প্ৰসংগ ৰক্ষণাবেক্ষণ কৰাটো গুৰুত্বপূৰ্ণ।
ৱান ফাইন বডি...
Twipsies এটা বিভ্ৰান্ত ব্যৱহাৰকাৰীক সহায় আৰু সঠিক দিশত আঙুলিয়াই দিয়াৰ বাবে ছুপাৰ উপযোগী।
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuuntur consequuntur, স্বভাৱৰ স্বভাৱৰ পৰিণতি, 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 architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae স্বৰূপ স্বৰূপ।
বিন্যাসত কোনো প্ৰভাৱ নেপেলোৱাকৈ এটা পৃষ্ঠালৈ উপপাঠ্য তথ্য প্ৰদান কৰিবলৈ popovers ব্যৱহাৰ কৰক।
ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড। মেচেনাছ ফ’চিবাছ মলিছ ইন্টাৰডাম। মৰ্বি লিও ৰিছাছ, পৰ্টা এ চি কনচেক্টেটুৰ এ চি, ইৰ'ছত ভেষ্টিবুলাম।
Bootstrap লাইব্ৰেৰীৰ সৈতে javascript সংহতি কৰাটো অতি সহজ। তলত আমি মূল কথাবোৰলৈ যাওঁ আৰু আপোনাক আৰম্ভ কৰিবলৈ কিছুমান ভয়ংকৰ প্লাগইন প্ৰদান কৰোঁ!
Bootstrap ৰ কিছুমান প্ৰাথমিক উপাদানক নতুন স্বনিৰ্বাচিত প্লাগইনসমূহৰ সৈতে জীৱন্ত কৰক যি jQuery আৰু Ender ৰ সৈতে কাম কৰে । আমি আপোনাক আপোনাৰ নিৰ্দিষ্ট বিকাশৰ প্ৰয়োজনীয়তা অনুসৰি সেইবোৰ সম্প্ৰসাৰণ আৰু পৰিৱৰ্তন কৰিবলৈ উৎসাহিত কৰোঁ।
ফাইল | বিৱৰণ |
---|---|
বুটষ্ট্ৰেপ-ম'ডাল.জেএছ | আমাৰ মডাল প্লাগইন হৈছে পৰম্পৰাগত মডাল js প্লাগইনৰ ওপৰত এটা ছুপাৰ স্লিম টেক! আমি বিশেষ যত্ন লৈছিলো যে কেৱল টুইটাৰত প্ৰয়োজনীয় উদং কাৰ্য্যক্ষমতাহে অন্তৰ্ভুক্ত কৰা হ’ল। |
বুটষ্ট্ৰেপ-এলাৰ্টছ.জে.এছ | সতৰ্কবাণী প্লাগইন সতৰ্কবাণীসমূহত বন্ধ কাৰ্য্যকৰীতা যোগ কৰাৰ বাবে এটা অতি ক্ষুদ্ৰ শ্ৰেণী। |
বুটষ্ট্ৰেপ-ড্ৰপডাউন.js | এই প্লাগ-ইন বুটষ্ট্ৰেপ শীৰ্ষবাৰ বা টেব কৰা নেভিগেচনসমূহত ড্ৰপডাউন পাৰস্পৰিক ক্ৰিয়া যোগ কৰাৰ বাবে । |
বুটষ্ট্ৰেপ-স্ক্ৰলছপি.জে.এছ | ScrollSpy প্লাগ-ইন এটা স্বয়ংক্ৰিয় আপডেইট কৰা nav বুটষ্ট্ৰেপ শীৰ্ষবাৰত স্ক্ৰল অৱস্থানৰ ওপৰত ভিত্তি কৰি যোগ কৰাৰ বাবে। |
বুটষ্ট্ৰেপ-টেবছ.জেএছ | এই প্লাগিনে স্থানীয় বিষয়বস্তুৰ মাজেৰে চাইক্লিং কৰাৰ বাবে দ্ৰুত, গতিশীল টেব আৰু পিল কাৰ্য্যকৰীতা যোগ কৰে। |
বুটষ্ট্ৰেপ-টুইপ্সি.জেএছ | জেছন ফ্ৰেমৰ দ্বাৰা লিখা চমৎকাৰ jQuery.tipsy প্লাগইনৰ ওপৰত ভিত্তি কৰি; twipsy এটা আপডেইট কৰা সংস্কৰণ, যি ছবিৰ ওপৰত নিৰ্ভৰ নকৰে, এনিমেচনৰ বাবে css3 ব্যৱহাৰ কৰে, আৰু স্থানীয় শিৰোনাম সংৰক্ষণৰ বাবে ডাটা-বৈশিষ্ট্যসমূহ! |
বুটষ্ট্ৰেপ-পপ'ভাৰ.জেএছ | popover প্লাগ-ইন আপোনাৰ এপ্লিকেচনত popovers যোগ কৰাৰ বাবে এটা সৰল আন্তঃপৃষ্ঠ প্ৰদান কৰে। ই boostrap-twipsy.js প্লাগইন সম্প্ৰসাৰিত কৰে, গতিকে আপোনাৰ প্ৰকল্পত popovers অন্তৰ্ভুক্ত কৰাৰ সময়ত সেই নথিপত্ৰটোও নিশ্চিতভাৱে গ্ৰহণ কৰক! |
নহয়!বুটষ্ট্ৰেপক প্ৰথম আৰু প্ৰধানকৈ এটা CSS লাইব্ৰেৰী হ'বলৈ ডিজাইন কৰা হৈছে । এই জাভাস্ক্রিপ্টে অন্তৰ্ভুক্ত শৈলীসমূহৰ ওপৰত এটা মূল পাৰস্পৰিক স্তৰ প্ৰদান কৰে।
কিন্তু, যিসকলক জাভাস্ক্রিপ্টৰ প্ৰয়োজন, আমি ওপৰৰ প্লাগইনসমূহ প্ৰদান কৰিছো যাতে আপোনাক জাভাস্ক্রিপ্টৰ সৈতে বুটষ্ট্ৰেপ কেনেকৈ সংহত কৰিব লাগে বুজিবলৈ সহায় কৰে আৰু আপোনাক তৎক্ষণাত মূল কাৰ্য্যকৰীতাৰ বাবে এটা দ্ৰুত, লঘু বিকল্প দিয়ে।
অধিক তথ্যৰ বাবে আৰু কিছুমান লাইভ ডেমো চাবলৈ, অনুগ্ৰহ কৰি আমাৰ প্লাগইন আলেখ্যন পৃষ্ঠা চাওক ।
বুটষ্ট্ৰেপক Preboot ৰ সৈতে নিৰ্মাণ কৰা হৈছিল , এটা মুক্ত-উৎস পেক মিক্সিন আৰু চলকসমূহৰ সৈতে ব্যৱহাৰ কৰিবলে Less , দ্ৰুত আৰু সহজ ৱেব বিকাশৰ বাবে এটা CSS প্ৰিপ্ৰচেছৰ ।
আমি Bootstrap ত Preboot কেনেকৈ ব্যৱহাৰ কৰিছিলোঁ আৰু আপুনি ইয়াক কেনেকৈ ব্যৱহাৰ কৰিব পাৰে চাওক যদি আপুনি আপোনাৰ পৰৱৰ্তী প্ৰকল্পত Less চলাবলৈ নিৰ্ব্বাচন কৰে ।
এই বিকল্প ব্যৱহাৰ কৰক Bootstrap ৰ Less চলকসমূহ, মিক্সিনসমূহ, আৰু আপোনাৰ ব্ৰাউজাৰত জাভাস্ক্রিপ্টৰ যোগেদি CSS ত নেষ্টিংৰ সম্পূৰ্ণ ব্যৱহাৰ কৰিবলে ।
- <link rel = "ষ্টাইলশ্বীট/কম" href = "কম/বুটষ্ট্ৰেপ.কম" মাধ্যম = "সকলো" />
- <script src = "js/কম-১.১.৩.মিনিট.js" ></script>
.js সমাধান অনুভৱ কৰা নাই? Less Mac এপটো চেষ্টা কৰক বা আপুনি আপোনাৰ ক'ড মোতায়েন কৰাৰ সময়ত কম্পাইল কৰিবলৈ Node.js ব্যৱহাৰ কৰক।
বুটষ্ট্ৰেপৰ অংশ হিচাপে টুইটাৰ বুটষ্ট্ৰেপত কি অন্তৰ্ভুক্ত কৰা হৈছে তাৰ কিছুমান উল্লেখযোগ্য দিশ ইয়াত দিয়া হ'ল। ডাউনলোড কৰিবলে আৰু অধিক জানিবলৈ Bootstrap ৱেবছাইট বা Github প্ৰকল্প পৃষ্ঠালৈ যাওক।
কমত চলকসমূহ আপোনাৰ CSS মূৰৰ বিষমুক্ত ৰক্ষণাবেক্ষণ আৰু আপডেইট কৰাৰ বাবে নিখুঁত। যেতিয়া আপুনি এটা ৰঙৰ মান বা এটা সঘনাই ব্যৱহৃত মান সলনি কৰিব বিচাৰে, ইয়াক এটা ঠাইত আপডেইট কৰক আৰু আপুনি সংহতি কৰা হৈছে।
- // সংযোগসমূহ
- @লিংকৰ ৰং : #8b59c2 ;
- @linkColorHover : অন্ধকাৰ কৰক ( @linkColor , 10 );
- // ধূসৰ
- @ক'লা : #০০০;
- @grayDark : পোহৰ কৰক ( @ক'লা , ২৫ %);
- @ধূসৰ : পাতল কৰক ( @ক'লা , ৫০ %);
- @grayLight : পাতল কৰক ( @ক'লা , ৭০ %);
- @grayLighter : লঘু কৰক ( @black , 90 %);
- @বগা : #fff ;
- // উচ্চাৰণ ৰং
- @নীলা : #০৮b৫fb ;
- @সেউজীয়া : #৪৬a৫৪৬ ;
- @ৰঙা : #9d261d ;
- @হালধীয়া : #ffc40d ;
- @কমলা : #f89406 ;
- @গোলাপী : #c3325f ;
- @বেঙুনীয়া : #7a43b6 ;
- // ভিত্তিৰেখা গ্ৰীড
- @বেছফন্ট : ১৩px ;
- @ ভিত্তি ৰেখা : 18px ;
/* ... */
Less এ CSS ৰ সাধাৰণ বাক্যবিন্যাসৰ উপৰিও মন্তব্যৰ অন্য শৈলীও প্ৰদান কৰে ।
- // এইটো এটা মন্তব্য
- /* এইটোও এটা মন্তব্য */
মিক্সিনসমূহ মূলতঃ CSS ৰ বাবে অন্তৰ্ভুক্ত বা আংশিক, আপোনাক ক'ডৰ এটা ব্লক এটাত একত্ৰিত কৰাৰ অনুমতি দিয়ে। বিক্ৰেতা উপসৰ্গযুক্ত বৈশিষ্ট্যৰ বাবে সিহঁত অতি উত্তম যেনেbox-shadow
বিক্ৰেতা উপসৰ্গযুক্ত বৈশিষ্ট্য যেনে , ক্ৰছ-ব্ৰাউজাৰ গ্ৰেডিয়েন্ট, ফন্ট ষ্টেক, আৰু অধিক ৰতলত Bootstrap ৰ সৈতে অন্তৰ্ভুক্ত কৰা মিক্সিনসমূহৰ এটা নমুনা দিয়া হৈছে ।
- #ফন্ট {
- . চৰ্টহেণ্ড ( @ ওজন : সাধাৰণ , @ আকাৰ : 14px , @lineHeight : 20px ) {
- ফন্ট - আকাৰ : @size ;
- ফন্ট - ওজন : @weight ;
- ৰেখা - উচ্চতা : @lineHeight ;
- }
- . sans - serif ( @ ওজন : স্বাভাৱিক , @আকাৰ : ১৪px , @lineHeight : @ ) {
- ফন্ট - পৰিয়াল : "Helvetica Neue" , হেলভেটিকা , Arial , sans - serif ;
- ফন্ট - আকাৰ: @size ;
- ফন্ট - ওজন: @weight ;
- ৰেখা - উচ্চতা : @lineHeight ;
- }
- ...
- }
- #গ্ৰেডিয়েন্ট {
- ...
- . উলম্ব ( @আৰম্ভৰ ৰং : #৫৫৫, @অন্তৰ ৰং: #৩৩৩) {
- পটভূমি - ৰং : @endColor ;
- পটভূমি - পুনৰাবৃত্তি : পুনৰাবৃত্তি - x ;
- background - image : - khtml - gradient ( ৰৈখিক , বাওঁফালৰ ওপৰত , বাওঁফালৰ তলত , ( @startColor ) ৰ পৰা ( @endColor ) লৈ ); // কনকুৱেৰ
- পটভূমি - ছবি : - moz - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // এফ এফ ৩.৬+
- পটভূমি - ছবি : - ms - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // আই ই ১০
- পটভূমি - ছবি : - webkit - গ্ৰেডিয়েন্ট ( ৰৈখিক , বাওঁ ওপৰ , বাওঁ তল , ৰং - বন্ধ ( 0 %, @startColor ), ৰং - বন্ধ ( 100 %, @endColor )); // ছাফাৰী ৪+, ক্ৰ’ম ২+
- পটভূমি - ছবি : - ৱেবকিট - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // ছাফাৰী ৫.১+, ক্ৰ’ম ১০+
- পটভূমি - ছবি : - o - ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // অপেৰা ১১.১০
- পটভূমি - ছবি : ৰৈখিক - গ্ৰেডিয়েন্ট ( @startColor , @endColor ); // প্ৰামাণিক
- }
- ...
- }
তলৰটোৰ দৰে নমনীয় আৰু শক্তিশালী মিক্সিন সৃষ্টি কৰিবলৈ আড়ম্বৰপূৰ্ণ হওক আৰু কিছুমান গণিত সম্পন্ন কৰক।
- // গ্ৰীডিটুড
- @gridColumns : ১৬ ;
- @গ্ৰিডস্তম্ভৰ প্ৰস্থ : ৪০px ;
- @গ্ৰিডগাটাৰপ্ৰস্থ : ২০px ;
- @siteWidth : ( @গ্ৰিডস্তম্ভ * @গ্ৰিডস্তম্ভপ্ৰস্থ ) + ( @গ্ৰিডগাটাৰপ্ৰস্থ * ( @গ্ৰিডস্তম্ভ - 1 ));
- // কিছুমান স্তম্ভ বনাওক
- . স্তম্ভসমূহ ( @columnSpan : 1 ) {
- width : ( @গ্ৰিডস্তম্ভপ্ৰস্থ * @স্তম্ভস্পেন ) + ( @গ্ৰিডগাটাৰপ্ৰস্থ * ( @স্তম্ভস্পেন - 1 ));
- }
পৰিৱৰ্তন কৰাৰ পিছত.less
, আপুনি সিহতক পুনৰায় সংকলন কৰিব লাগিব bootstrap-*.*.*.css আৰু bootstrap-*.*.*.min.css নথিপত্ৰসমূহ পুনৰায় সৃষ্টি কৰিবলে । যদি আপুনি GitHub লৈ এটা পুল অনুৰোধ জমা দিছে, আপুনি সদায় পুনৰ কম্পাইল কৰিব লাগিব।
প্রণালী | খোজ |
---|---|
মেকফাইলৰ সৈতে ন'ড | নিম্নলিখিত আদেশ চলাই npm ৰ সৈতে less আদেশ শাৰী কমপাইলাৰ সংস্থাপন কৰক: $ npm ইনষ্টল কৰক lessc এবাৰ সংস্থাপন অতিৰিক্তভাৱে, যদি আপুনি watchr সংস্থাপন কৰিছে, আপুনি |
জাভাস্ক্রিপ্ট | শেহতীয়া Less.js ডাউনল'ড কৰক আৰু ইয়াৰ পথ (আৰু Bootstrap) ত অন্তৰ্ভুক্ত কৰক
.less নথিপত্ৰসমূহ পুনৰায় কম্পাইল কৰিবলে, মাত্ৰ সিহতক সংৰক্ষণ কৰক আৰু আপোনাৰ পৃষ্ঠা পুনৰায় ল'ড কৰক । Less.js এ সিহতক কম্পাইল কৰে আৰু স্থানীয় সংৰক্ষণত সংৰক্ষণ কৰে। |
কমাণ্ড লাইন | যদি আপোনাৰ ইতিমধ্যে কম আদেশ শাৰী সঁজুলি সংস্থাপন কৰা আছে, কেৱল নিম্নলিখিত আদেশ চলাওক: $ lessc ./lib/bootstrap.less > বুটস্ট্ৰেপ.css
|
কম মেক এপ | বেচৰকাৰী Mac এপটোৱে .less ফাইলসমূহৰ ডাইৰেকটৰীসমূহ চায় আৰু এটা চোৱা .less ফাইলৰ প্ৰতিটো সংৰক্ষণৰ পিছত ক'ডটো স্থানীয় ফাইলসমূহলৈ কম্পাইল কৰে। যদি আপুনি বিচাৰে, আপুনি স্বয়ংক্ৰিয় ক্ষুদ্ৰকৰণৰ বাবে এপটোত পছন্দসমূহ টগল কৰিব পাৰে আৰু কম্পাইল কৰা ফাইলসমূহ কোনটো ডাইৰেকটৰীত শেষ হয়। |