Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
বুটস্ট্র্যাপ হল টুইটারের একটি টুলকিট যা ওয়েবঅ্যাপ এবং সাইটের বিকাশ শুরু করার জন্য ডিজাইন করা হয়েছে।
এতে টাইপোগ্রাফি, ফর্ম, বোতাম, টেবিল, গ্রিড, নেভিগেশন এবং আরও অনেক কিছুর জন্য বেস CSS এবং HTML অন্তর্ভুক্ত রয়েছে।
Nerd সতর্কতা: বুটস্ট্র্যাপ কম দিয়ে তৈরি করা হয়েছে এবং আধুনিক ব্রাউজারগুলিকে মাথায় রেখে গেটের বাইরে কাজ করার জন্য ডিজাইন করা হয়েছে৷
দ্রুততম এবং সহজে শুরু করার জন্য, শুধু এই স্নিপেটটি আপনার ওয়েবপৃষ্ঠায় অনুলিপি করুন৷
কম ব্যবহার করার অনুরাগী? কোন সমস্যা নেই, শুধু রেপো ক্লোন করুন এবং এই লাইনগুলি যোগ করুন:
Github-এ অফিসিয়াল বুটস্ট্র্যাপ রেপো দিয়ে ডাউনলোড, কাঁটাচামচ, টান, ফাইল সমস্যা এবং আরও অনেক কিছু।
বর্তমানে v1.3.0
টুইটারের প্রকৌশলীরা ঐতিহাসিকভাবে ফ্রন্ট-এন্ড প্রয়োজনীয়তা পূরণের জন্য পরিচিত প্রায় যেকোনো লাইব্রেরি ব্যবহার করেছেন। বুটস্ট্র্যাপ উপস্থাপিত চ্যালেঞ্জগুলির উত্তর হিসাবে শুরু হয়েছিল। অনেক দুর্দান্ত লোকের সাহায্যে, বুটস্ট্র্যাপ উল্লেখযোগ্যভাবে বৃদ্ধি পেয়েছে।
dev.twitter.com এ আরও পড়ুন ›
বুটস্ট্র্যাপ ক্রোম, সাফারি, ইন্টারনেট এক্সপ্লোরার এবং ফায়ারফক্সের মতো প্রধান আধুনিক ব্রাউজারগুলিতে পরীক্ষিত এবং সমর্থিত।
বুটস্ট্র্যাপ কম্পাইল করা CSS, uncompiled, এবং উদাহরণ টেমপ্লেট সহ সম্পূর্ণ আসে।
বুটস্ট্র্যাপের অংশ হিসেবে প্রদত্ত ডিফল্ট গ্রিড সিস্টেম হল একটি 940px চওড়া 16-কলামের গ্রিড। এটি জনপ্রিয় 960 গ্রিড সিস্টেমের একটি স্বাদ, কিন্তু বাম এবং ডান দিকে অতিরিক্ত মার্জিন/প্যাডিং ছাড়াই।
এখানে দেখানো হিসাবে, দুটি "কলাম" দিয়ে একটি মৌলিক লেআউট তৈরি করা যেতে পারে, প্রতিটি 16টি মৌলিক কলামের একটি সংখ্যক বিস্তৃত যা আমরা আমাদের গ্রিড সিস্টেমের অংশ হিসাবে সংজ্ঞায়িত করেছি। আরও বৈচিত্র্যের জন্য নীচের উদাহরণগুলি দেখুন।
- <div ক্লাস = "সারি" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
যদি আপনি .row
একটি বিদ্যমান কলামের মধ্যে একটি তৈরি করে আপনার সামগ্রী নেস্ট করুন৷
- <div ক্লাস = "সারি" >
- <div class = "span12" >
- কলামের লেভেল 1
- <div ক্লাস = "সারি" >
- <div class = "span6" >
- স্তর 2
- </div>
- <div class = "span6" >
- স্তর 2
- </div>
- </div>
- </div>
- </div>
ডিফল্ট 940px গ্রিড সিস্টেম কাস্টমাইজ করার জন্য বুটস্ট্র্যাপে বিল্ট ইন হল কয়েকটি ভেরিয়েবল। কিছুটা কাস্টমাইজেশনের মাধ্যমে, আপনি কলামের আকার, তাদের নর্দমা এবং তারা যে পাত্রে থাকে তা পরিবর্তন করতে পারেন।
বর্তমানে গ্রিড সিস্টেম পরিবর্তন করার জন্য প্রয়োজনীয় ভেরিয়েবলগুলি সবই তে থাকে preboot.less
৷
পরিবর্তনশীল | ডিফল্ট মান | বর্ণনা |
---|---|---|
@gridColumns |
16 | গ্রিডের মধ্যে কলামের সংখ্যা |
@gridColumnWidth |
40px | গ্রিডের মধ্যে প্রতিটি কলামের প্রস্থ |
@gridGutterWidth |
20px | প্রতিটি কলামের মধ্যে ঋণাত্মক স্থান |
@siteWidth |
সমস্ত কলাম এবং নর্দমার গণনা করা যোগফল | আমরা কলাম এবং নর্দমার সংখ্যা গণনা করতে এবং .fixed-container() মিক্সিনের প্রস্থ সেট করতে কিছু মৌলিক মিল ব্যবহার করি। |
গ্রিড পরিবর্তন করার অর্থ হল তিনটি @grid-*
ভেরিয়েবল পরিবর্তন করা এবং কম ফাইল পুনরায় কম্পাইল করা।
বুটস্ট্র্যাপ 24টি কলাম পর্যন্ত একটি গ্রিড সিস্টেম পরিচালনা করতে সজ্জিত হয়; ডিফল্ট মাত্র 16। এখানে আপনার গ্রিড ভেরিয়েবল 24-কলামের গ্রিডে কাস্টমাইজড দেখাবে।
- @গ্রিডকলাম : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
একবার পুনরায় কম্পাইল, আপনি সেট করা হবে!
ডিফল্ট এবং সহজ 940px-প্রশস্ত, কেন্দ্রীভূত বিন্যাস শুধুমাত্র একটি একক দ্বারা প্রদত্ত যেকোন ওয়েবসাইট বা পৃষ্ঠার জন্য <div.container>
।
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
একটি বিকল্প, নমনীয় তরল পাতার গঠন যার সর্বনিম্ন- এবং সর্বোচ্চ-প্রস্থ এবং একটি বাম-হাতে সাইডবার। অ্যাপস এবং ডক্সের জন্য দুর্দান্ত।
- <body>
- <div class = "container-fluid" >
- <div ক্লাস = "সাইডবার" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
আপনার ওয়েবপৃষ্ঠাগুলি গঠনের জন্য একটি আদর্শ টাইপোগ্রাফিক অনুক্রম।
সম্পূর্ণ টাইপোগ্রাফিক গ্রিডটি আমাদের preboot.less ফাইলের দুটি Less ভেরিয়েবলের উপর ভিত্তি করে: @basefont
এবং @baseline
. প্রথমটি সর্বত্র ব্যবহৃত বেস ফন্ট-আকার এবং দ্বিতীয়টি হল বেস লাইন-উচ্চতা।
আমরা আমাদের সকল প্রকারের মার্জিন, প্যাডিং এবং লাইন-উচ্চতা তৈরি করতে সেই ভেরিয়েবলগুলি এবং কিছু গণিত ব্যবহার করি।
নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Nullam id dolor id nibh ultricies vehicula ut id elit.
জোর, ঠিকানা, এবং সংক্ষিপ্ত রূপ ব্যবহার করে
<strong>
<em>
<address>
<abbr>
জোর ট্যাগ ( <strong>
এবং <em>
) ব্যবহার করা উচিত একটি শব্দ বা শব্দগুচ্ছের আশেপাশের অনুলিপির সাথে সম্পর্কিত অতিরিক্ত গুরুত্ব বা জোর নির্দেশ করার জন্য। <strong>
গুরুত্ব এবং চাপ জোর <em>
জন্য ব্যবহার করুন .
ফুস ড্যাপিবাস , টেলস এসি কার্সাস কমোডো , টরটর মৌরিস কনডিমেন্টাম নিভ , ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। Maecenas faucibus mollis interdum. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু।
দ্রষ্টব্য: এটি এখনও HTML5-এ ব্যবহার করা <b>
এবং <i>
ট্যাগ করা ঠিক আছে এবং তাদের যথাক্রমে বোল্ড এবং ইটালিক স্টাইল করতে হবে না (যদিও যদি আরও শব্দার্থিক উপাদান থাকে তবে এটি ব্যবহার করুন)। <b>
অতিরিক্ত গুরুত্ব না দিয়ে শব্দ বা বাক্যাংশগুলিকে হাইলাইট করার জন্য বোঝানো হয়, যদিও <i>
বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।
উপাদানটি তার নিকটতম <address>
পূর্বপুরুষ বা কাজের পুরো অংশের যোগাযোগের তথ্যের জন্য ব্যবহৃত হয়। এটি কীভাবে ব্যবহার করা যেতে পারে তার দুটি উদাহরণ এখানে রয়েছে:
দ্রষ্টব্য: একটি লাইনের প্রতিটি লাইন <address>
অবশ্যই একটি লাইন-ব্রেক ( ) দিয়ে শেষ করতে হবে বা বিষয়বস্তুকে সঠিকভাবে গঠন করতে <br />
একটি ব্লক-লেভেল ট্যাগ (যেমন, ) দিয়ে মোড়ানো উচিত ।<p>
সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য, <abbr>
ট্যাগটি ব্যবহার করুন ( HTML5<acronym>
তে অবচয়িত )। ট্যাগের মধ্যে শর্টহ্যান্ড ফর্মটি রাখুন এবং সম্পূর্ণ নামের জন্য একটি শিরোনাম সেট করুন।
<blockquote>
<p>
<small>
একটি ব্লককোট অন্তর্ভুক্ত করতে, <blockquote>
চারপাশে মোড়ানো <p>
এবং <small>
ট্যাগ করুন। <small>
আপনার উৎস উদ্ধৃত করার জন্য উপাদানটি ব্যবহার করুন এবং আপনি এটির —
আগে একটি এম ড্যাশ পাবেন।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যার একটি পূর্বে ভেনেনাটিস ড্যাপিবাস পোস্যুয়ার ভেলিট অ্যালিকেট।
ডাঃ জুলিয়াস হিবার্ট
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যার একটি পূর্বে ভেনেনাটিস ড্যাপিবাস পোস্যুয়ার ভেলিট অ্যালিকেট। </p>
- <small> ডাঃ জুলিয়াস হিবার্ট </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
দুটি সহজ ট্যাগ দিয়ে আপনার কোড স্টাইলে পিম্প করুন। জাভাস্ক্রিপ্টের মাধ্যমে আরও অসাধারণতার জন্য, Google এর কোড প্রিটিফাই লাইব্রেরিতে ড্রপ করুন এবং আপনি সেট হয়ে গেছেন।
কোড, ব্লক বা স্নিপেট ইনলাইন, শুধুমাত্র ডান ট্যাগে মোড়ানোর মাধ্যমে স্টাইলের সাথে প্রদর্শিত হতে পারে। একাধিক লাইন বিস্তৃত কোড ব্লকের জন্য, <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 ডাউনলোড করুন এবং কিভাবে ব্যবহার করবেন তার জন্য রিডমি দেখুন। |
<span class="label">
আপনার বডি টেক্সটের যেকোনো শব্দগুচ্ছের প্রতি মনোযোগ দিন বা ফ্ল্যাগ করুন।
কখনও যারা অভিনব নতুন এক প্রয়োজন! কোড লেখার সময় বা গুরুত্বপূর্ণ পতাকা? ওয়েল, এখন আপনি তাদের আছে. ডিফল্টরূপে যা অন্তর্ভুক্ত করা হয়েছে তা এখানে:
লেবেল | ফলাফল |
---|---|
<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 = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" 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>
।
পঠনযোগ্যতা নিশ্চিত করতে এবং গঠন বজায় রাখার জন্য সমস্ত টেবিল স্বয়ংক্রিয়ভাবে শুধুমাত্র প্রয়োজনীয় সীমানা দিয়ে স্টাইল করা হবে। অতিরিক্ত ক্লাস বা গুণাবলী যোগ করার প্রয়োজন নেই।
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | কিছু | এক | ইংরেজি |
2 | জো | সিক্স প্যাক | ইংরেজি |
3 | স্টু | ডেন্ট | কোড |
- <টেবিল>
- ...
- </ টেবিল>
জেব্রা-স্ট্রাইপিং যোগ করে আপনার টেবিলের সাথে একটু অভিনব হয়ে উঠুন—শুধু .zebra-striped
ক্লাস যোগ করুন।
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | কিছু | এক | ইংরেজি |
2 | জো | সিক্স প্যাক | ইংরেজি |
3 | স্টু | ডেন্ট | কোড |
দ্রষ্টব্য: জেব্রা-স্ট্রাইপিং একটি প্রগতিশীল বর্ধন যা IE8 এবং নীচের মত পুরানো ব্রাউজারগুলির জন্য উপলব্ধ নয়৷
- <টেবিল ক্লাস = "জেব্রা-স্ট্রিপড" >
- ...
- </ টেবিল>
পূর্ববর্তী উদাহরণ গ্রহণ করে, আমরা jQuery এবং Tablesorter প্লাগইনের মাধ্যমে সাজানোর কার্যকারিতা প্রদান করে আমাদের টেবিলের উপযোগিতা উন্নত করি । সাজানোর পরিবর্তন করতে যেকোনো কলামের হেডারে ক্লিক করুন।
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
2 | জো | সিক্স প্যাক | ইংরেজি |
3 | স্টু | ডেন্ট | কোড |
1 | তোমার | এক | ইংরেজি |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <স্ক্রিপ্ট >
- $ ( ফাংশন () {
- $ ( "টেবিল#sortTableExample" )। টেবিলসর্টার ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <টেবিল ক্লাস = "জেব্রা-স্ট্রিপড" >
- ...
- </ টেবিল>
একটি পঠনযোগ্য এবং মাপযোগ্য উপায়ে উপস্থাপন করার জন্য সমস্ত ফর্মকে ডিফল্ট শৈলী দেওয়া হয়। টেক্সট ইনপুট, সিলেক্ট লিস্ট, টেক্সটেরিয়া, রেডিও বোতাম এবং চেকবক্স এবং বোতামের জন্য শৈলী প্রদান করা হয়।
আপনার ফর্মের 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 = "close" href = "#" > × </a>
- <p><strong> পবিত্র গুয়াকামোল! </strong> সর্বোত্তম চেক ইয়ো নিজেকে, আপনি খুব ভাল দেখাচ্ছে না. </p>
- </div>
.alert-message.block-message
যে বার্তাগুলির জন্য কিছুটা ব্যাখ্যা প্রয়োজন, আমাদের কাছে অনুচ্ছেদ শৈলী সতর্কতা রয়েছে৷ এগুলি দীর্ঘ ত্রুটি বার্তাগুলিকে বুদবুদ করার জন্য, একটি মুলতুবি ক্রিয়া সম্পর্কে ব্যবহারকারীকে সতর্ক করার জন্য বা পৃষ্ঠায় আরও জোর দেওয়ার জন্য তথ্য উপস্থাপনের জন্য উপযুক্ত।
- <div ক্লাস = "সতর্ক-বার্তা ব্লক-বার্তা সতর্কতা" >
- <a class = "close" href = "#" > × </a>
- <p><strong> পবিত্র গুয়াকামোল! এটি একটি সতর্কতা! </strong> সর্বোত্তম চেক ইয়ো নিজেকে, আপনি খুব ভাল দেখাচ্ছে না. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। প্রেজেন্ট কমোডো কার্সাস ম্যাগনা, vel scelerisque nisl consectetur et. </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 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
লেআউট প্রভাবিত না করে একটি পৃষ্ঠায় সাবটেক্সচুয়াল তথ্য প্রদান করতে পপওভার ব্যবহার করুন।
Etiam porta sem malesuada Magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
বুটস্ট্র্যাপ লাইব্রেরির সাথে জাভাস্ক্রিপ্ট একত্রিত করা খুবই সহজ। নীচে আমরা মূল বিষয়গুলি নিয়ে যাই এবং আপনাকে শুরু করতে কিছু দুর্দান্ত প্লাগইন সরবরাহ করি!
jQuery এবং Ender- এর সাথে কাজ করে এমন নতুন কাস্টম প্লাগইনগুলির সাহায্যে বুটস্ট্র্যাপের প্রাথমিক কিছু উপাদানকে প্রাণবন্ত করুন । আমরা আপনাকে প্রসারিত করতে এবং আপনার নির্দিষ্ট বিকাশের প্রয়োজনের সাথে খাপ খাইয়ে পরিবর্তন করতে উত্সাহিত করি।
ফাইল | বর্ণনা |
---|---|
bootstrap-modal.js | আমাদের মোডাল প্লাগইনটি ঐতিহ্যবাহী মডেল জেএস প্লাগইনের একটি সুপার স্লিম টেক! আমরা টুইটারে প্রয়োজন শুধুমাত্র খালি কার্যকারিতা অন্তর্ভুক্ত করার জন্য বিশেষ যত্ন নিয়েছি। |
bootstrap-alerts.js | সতর্কতা প্লাগইনটি সতর্কতার সাথে ঘনিষ্ঠ কার্যকারিতা যোগ করার জন্য একটি অতি ক্ষুদ্র শ্রেণী। |
bootstrap-dropdown.js | এই প্লাগইনটি বুটস্ট্র্যাপ টপবার বা ট্যাবড নেভিগেশনে ড্রপডাউন ইন্টারঅ্যাকশন যোগ করার জন্য। |
bootstrap-scrollspy.js | স্ক্রোলস্পাই প্লাগইনটি বুটস্ট্র্যাপ টপবারে স্ক্রোল অবস্থানের উপর ভিত্তি করে একটি স্বয়ংক্রিয় আপডেটিং এনএভি যোগ করার জন্য। |
bootstrap-tabs.js | এই প্লাগইন স্থানীয় বিষয়বস্তুর মাধ্যমে সাইকেল চালানোর জন্য দ্রুত, গতিশীল ট্যাব এবং পিল কার্যকারিতা যোগ করে। |
bootstrap-twipsy.js | জেসন ফ্রেম দ্বারা লিখিত চমৎকার jQuery.tipsy প্লাগইনের উপর ভিত্তি করে; twipsy হল একটি আপডেটেড সংস্করণ, যা ছবির উপর নির্ভর করে না, অ্যানিমেশনের জন্য css3 এবং স্থানীয় শিরোনাম স্টোরেজের জন্য ডেটা-অ্যাট্রিবিউট ব্যবহার করে! |
bootstrap-popover.js | পপওভার প্লাগইন আপনার অ্যাপ্লিকেশনে পপওভার যোগ করার জন্য একটি সহজ ইন্টারফেস প্রদান করে। এটি boostrap-twipsy.js প্লাগইনকে প্রসারিত করে , তাই আপনার প্রকল্পে পপওভারগুলি অন্তর্ভুক্ত করার সময় সেই ফাইলটিও দখল করতে ভুলবেন না! |
না! বুটস্ট্র্যাপ একটি CSS লাইব্রেরি হওয়ার জন্য প্রথম এবং সর্বাগ্রে ডিজাইন করা হয়েছে। এই জাভাস্ক্রিপ্ট অন্তর্ভুক্ত শৈলীর উপরে একটি মৌলিক ইন্টারেক্টিভ স্তর প্রদান করে।
যাইহোক, যাদের জাভাস্ক্রিপ্টের প্রয়োজন তাদের জন্য, আমরা উপরের প্লাগইনগুলি দিয়েছি যাতে আপনি বুঝতে পারেন কিভাবে জাভাস্ক্রিপ্টের সাথে বুটস্ট্র্যাপকে একীভূত করতে হয় এবং আপনাকে মৌলিক কার্যকারিতার জন্য একটি দ্রুত, হালকা বিকল্প দিতে।
আরও তথ্যের জন্য এবং কিছু লাইভ ডেমো দেখতে, অনুগ্রহ করে আমাদের প্লাগইন ডকুমেন্টেশন পৃষ্ঠা দেখুন ।
বুটস্ট্র্যাপ প্রিবুট দিয়ে তৈরি করা হয়েছিল, একটি ওপেন-সোর্স প্যাক যা মিক্সিন এবং ভেরিয়েবলের সাথে একত্রে ব্যবহার করা হবে , দ্রুত এবং সহজ ওয়েব ডেভেলপমেন্টের জন্য একটি CSS প্রিপ্রসেসর।
বুটস্ট্র্যাপে আমরা কীভাবে প্রিবুট ব্যবহার করেছি এবং আপনার পরবর্তী প্রকল্পে কম চালানোর জন্য আপনি কীভাবে এটি ব্যবহার করতে পারেন তা দেখুন।
আপনার ব্রাউজারে জাভাস্ক্রিপ্টের মাধ্যমে বুটস্ট্র্যাপের কম ভেরিয়েবল, মিক্সিন এবং সিএসএস-এ নেস্টিংয়ের সম্পূর্ণ ব্যবহার করতে এই বিকল্পটি ব্যবহার করুন।
- <link rel = "stylesheet/less" href = "less/bootstrap.less" মিডিয়া = "সমস্ত" />
- <script src = "js/less-1.1.3.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 ;
- // বেসলাইন গ্রিড
- @বেসফন্ট : 13px ;
- @ বেসলাইন : 18px ;
/* ... */
কম সিএসএস-এর স্বাভাবিক সিনট্যাক্স ছাড়াও মন্তব্য করার আরেকটি শৈলী প্রদান করে ।
- // এটি একটি মন্তব্য
- /* এটিও একটি মন্তব্য */
Mixins মূলত CSS এর জন্য অন্তর্ভুক্ত বা আংশিক, যা আপনাকে কোডের একটি ব্লককে একটিতে একত্রিত করতে দেয়। এগুলি বিক্রেতার উপসর্গযুক্ত বৈশিষ্ট্যগুলির জন্য দুর্দান্ত যেমন box-shadow
, ক্রস-ব্রাউজার গ্রেডিয়েন্ট, ফন্ট স্ট্যাক এবং আরও অনেক কিছু। নীচে বুটস্ট্র্যাপের সাথে অন্তর্ভুক্ত মিক্সিনের একটি নমুনা রয়েছে।
- #ফন্ট {
- . শর্টহ্যান্ড ( @ওজন : স্বাভাবিক , @আকার : 14px , @ লাইন উচ্চতা : 20px ) {
- ফন্ট সাইজ : @size ; _
- ফন্ট - ওজন : @weight ;
- লাইন - উচ্চতা : @ লাইন উচ্চতা ;
- }
- . সান - সেরিফ ( @ওজন : স্বাভাবিক , @আকার : 14px , @ লাইন উচ্চতা : 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
- ব্যাকগ্রাউন্ড - ইমেজ : লিনিয়ার - গ্রেডিয়েন্ট ( @startColor , @endColor ); // মান
- }
- ...
- }
অভিনব হন এবং নীচের মত নমনীয় এবং শক্তিশালী মিশ্রণ তৈরি করতে কিছু গণিত সম্পাদন করুন।
- // গ্রিডিটিউড
- @গ্রিডকলাম : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // কিছু কলাম তৈরি করুন
- . কলাম ( @columnSpan : 1 ) {
- প্রস্থ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
ফাইলগুলিকে /lib/-এ পরিবর্তন করার পরে .less
, আপনাকে বুটস্ট্র্যাপ-*#.css এবং bootstrap-*#.min.css ফাইলগুলি পুনরায় তৈরি করার জন্য তাদের পুনরায় কম্পাইল করতে হবে। আপনি যদি GitHub-এ একটি পুল অনুরোধ জমা দেন তবে আপনাকে অবশ্যই সর্বদা পুনরায় কম্পাইল করতে হবে।
পদ্ধতি | ধাপ |
---|---|
মেকফাইল সহ নোড | নিম্নোক্ত কমান্ডটি চালিয়ে npm সহ কম কমান্ড লাইন কম্পাইলার ইনস্টল করুন: $npm কম ইন্সটল করুন একবার ইনস্টল হয়ে গেলে অতিরিক্তভাবে, যদি আপনার ওয়াচার ইন্সটল করা থাকে, আপনি বুটস্ট্র্যাপ lib- |
জাভাস্ক্রিপ্ট | সর্বশেষ Less.js ডাউনলোড করুন এবং এটিতে যাওয়ার পথ (এবং বুটস্ট্র্যাপ) অন্তর্ভুক্ত করুন
.less ফাইলগুলি পুনরায় কম্পাইল করতে, কেবল সেগুলি সংরক্ষণ করুন এবং আপনার পৃষ্ঠা পুনরায় লোড করুন৷ Less.js তাদের কম্পাইল করে এবং স্থানীয় স্টোরেজে সংরক্ষণ করে। |
কমান্ড লাইন | আপনার যদি ইতিমধ্যে কম কমান্ড লাইন টুল ইনস্টল করা থাকে, তাহলে কেবল নিম্নলিখিত কমান্ডটি চালান: $lessc ./lib/bootstrap.less > bootstrap.css
|
কম ম্যাক অ্যাপ | অনানুষ্ঠানিক ম্যাক অ্যাপটি .less ফাইলের ডিরেক্টরি দেখে এবং একটি দেখা .less ফাইলের প্রতিটি সংরক্ষণের পরে স্থানীয় ফাইলগুলিতে কোডটি কম্পাইল করে। আপনি যদি চান, আপনি স্বয়ংক্রিয়ভাবে ছোট করার জন্য অ্যাপে পছন্দগুলি টগল করতে পারেন এবং কম্পাইল করা ফাইলগুলি কোন ডিরেক্টরিতে শেষ হবে। |