টেবিলের অভ্যন্তরের জন্য পাঠ্য-সারিবদ্ধ শ্রেণি

Question

টুইটারের বুটস্ট্র্যাপ ফ্রেমওয়ার্কে এমন কিছু শ্রেণি রয়েছে যা পাঠ্যটিকে সারিবদ্ধ করে?

উদাহরণস্বরূপ, আমার $মোট কয়েকটি টেবিল রয়েছে যা আমি ডানদিকে প্রান্তিককরণ চাই ...

<th class="align-right">Total</th>

এবং

<td class="align-right">$1,000,000.00</td>

Answer 1

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

v3 পাঠ্য প্রান্তিককরণ ডক্স

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

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

v4 পাঠ্য প্রান্তিককরণ ডক্স

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Comments

দুর্ভাগ্যক্রমে এটি টেবিল কোষগুলির জন্য কাজ করে না। এটি কেবল কোনও সিএসএস অর্ডার সমস্যা হতে পারে। এই সমস্যাটি দেখুন [ github.com/twitter/bootstrap/issues/6837] । 3.0 সংস্করণে স্থির করা উচিত।

— ডেভিড

এটি পেতে আমি <td> <ডি ক্লাস = 'টেক্সট-সেন্টার'> বুটিন </ ডিভি> </ strong> করি।

— মাইকেল জে। ক্যালকিনস

আমি আশা করি বুটস্ট্র্যাপ এই শ্রেণীর সাথে ব্রেকপয়েন্টগুলি ব্যবহার করেছে যেমন: পাঠ্য-ডান-এমডি কেবলমাত্র মাঝারি আপের জন্য পাঠ্যকে ডানদিকে প্রান্তিককরণের জন্য।

— এরিক বিশার্ড

<p শ্রেণী = "পাঠ্য-বাম"> বাম প্রান্তিক পাঠ্য। ।। </ p> <p বর্গ = "টেক্সট ন্যায্যতা"> যাচাইযোগ্য টেক্সট? </ p> <p & বর্গ = "টেক্সট nowrap"> কোন মোড়ানো পাঠ্য? </ p>

— user5026837

এটি অদ্ভুত যে আমি টেক্সট-এমডি-রাইট (এবং xs & lg) ব্যবহার করার চেষ্টা করেছি কিন্তু সেগুলি কার্যকর হবে না। আমি কোডেপেনে ছিলাম যাতে এর সাথে কিছু করতে পারে। যাইহোক, এই উত্তরটি আমার পক্ষে কাজ করেছিল। ধন্যবাদ!

— এডসন

Answer 2

বুটস্ট্র্যাপ 3.x ব্যবহার text-rightকরে পুরোপুরি কাজ করে :

<td class="text-right">
  text aligned
</td>

Comments

আপনি এটি পুরো সারিতেও প্রয়োগ করতে পারেন: <টিআর ক্লাস = "পাঠ্য-ডান"> <td> পাঠ্য সারিবদ্ধ </ strong> </tr>

— গ্ল্যাড মেলর

Answer 3

না, এর জন্য বুটস্ট্র্যাপের কোনও ক্লাস নেই, তবে এই ধরণের শ্রেণিকে একটি "ইউটিলিটি" শ্রেণি হিসাবে বিবেচনা করা হয়, যা "অ্যান্টন উল্লিখিত" .পুল-ডান "শ্রেণীর অনুরূপ।

আপনি যদি ইউটিলিটিসটি লক্ষ্য করেন তবে আপনি বুটস্ট্র্যাপে খুব কম ইউটিলিটি ক্লাস দেখতে পাবেন, কারণ এই ধরণের শ্রেণীর উপর সাধারণত ত্রুটি রয়েছে এবং এটির জন্য ব্যবহার করার পরামর্শ দেওয়া হয়: ক) প্রোটোটাইপিং এবং বিকাশ - যাতে আপনি দ্রুত তৈরি করতে পারেন আপনার পৃষ্ঠাগুলি সরিয়ে ফেলুন, তারপরে টান-ডান এবং টান-বাম শ্রেণিগুলি আরও বেশি শব্দার্থক ক্লাসে ভাসমান প্রয়োগের পক্ষে বা তাদের উপাদানগুলিতে, বা খ) সরিয়ে ফেলুন যখন এটি আরও বেশি শব্দার্থক সমাধানের চেয়ে স্পষ্টতই বেশি কার্যকর।

আপনার ক্ষেত্রে, আপনার প্রশ্নের মাধ্যমে দেখে মনে হচ্ছে আপনি আপনার টেবিলের ডানদিকে কিছু নির্দিষ্ট পাঠ্য সারণী করতে চান তবে এটি সমস্ত কিছু নয়। শব্দার্থকভাবে, এর চেয়ে ভালো কিছু করা ভাল (আমি এখানে ডিফল্ট বুটস্ট্র্যাপ শ্রেণি বাদে কেবল কয়েকটি ক্লাস করব, টেবিল):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

এবং কেবলমাত্র মূল্য-মূল্য এবং মূল্য-লেবেল শ্রেণিতে (বা যে কোনও ক্লাস আপনার জন্য কাজ করে) text-align: leftবা text-align: rightঘোষণাগুলি প্রয়োগ করুন ।

align-rightক্লাস হিসাবে প্রয়োগের ক্ষেত্রে সমস্যাটি হ'ল যদি আপনি আপনার টেবিলগুলি রিফ্যাক্টর করতে চান তবে আপনাকে মার্কআপ এবং শৈলীগুলি আবার করতে হবে। আপনি যদি শব্দার্থক ক্লাসগুলি ব্যবহার করেন তবে আপনি কেবল সিএসএস সামগ্রীকে রিফ্যাক্টরিং করে পালাতে সক্ষম হতে পারেন। এছাড়াও, যদি কোনও উপাদানকে ক্লাস প্রয়োগ করতে সময় নিচ্ছে, তবে এই শ্রেণিতে অর্থপূর্ণ মূল্য নির্ধারণের চেষ্টা করা ভাল অনুশীলন যাতে অন্য প্রোগ্রামারদের (বা আপনার তিন মাস পরে) নেভিগেট করা সহজ হয়।

এটি ভাবার একটি উপায় হ'ল: আপনি যখন "এই টিডিটি কীসের জন্য?" প্রশ্নটি উত্থাপন করেন, আপনি উত্তর "সারিবদ্ধ-ডান" থেকে স্পষ্টতা পাবেন না।

Comments

এবং যাইহোক, আমি নিশ্চিত যে আমি শ্রেণীর নামগুলির সাথে আমার যা চয়ন করেছি তার চেয়ে ভাল করতে পারব। তবে তা জোর দেওয়া হয়নি

— 0-10 তে jonschlinkert

তারা এ সময় করেনি, এবং আইএমও এখনও করা উচিত নয়।

— jonschlinkert

Answer 4

বুটস্ট্র্যাপ ২.৩ এর ইউটিলিটি ক্লাস রয়েছে text-left, text-rightএবং text-center, তবে তারা টেবিল কোষগুলিতে কাজ করে না। বুটস্ট্র্যাপ 3.0.০ প্রকাশ না হওয়া পর্যন্ত (যেখানে তারা সমস্যাটি স্থির করেছে) এবং আমি স্যুইচ করতে সক্ষম হয়েছি, আমি এটি আমার সাইট সিএসএসে যুক্ত করে রেখেছি যা পরে লোড হয় bootstrap.css:

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

Answer 5

কেবল একটি "কাস্টম" স্টাইলশিট যুক্ত করুন যা বুটস্ট্র্যাপের স্টাইলশিটের পরে লোড হয়। সুতরাং শ্রেণীর সংজ্ঞাগুলি ওভারলোড হয়।

এই স্টাইলশীটে নিম্নরূপভাবে প্রান্তিককরণ ঘোষণা করুন:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

এখন আপনি টিডি এবং তম উপাদানগুলির জন্য "সাধারণ" প্রান্তিককরণ কনভেনশনগুলি ব্যবহার করতে সক্ষম হন।

Answer 6

আমার ধারণা text-align:right, সিএসএস ইতিমধ্যে রয়েছে , আফাইক, বুটস্ট্র্যাপের জন্য এটির জন্য বিশেষ শ্রেণি নেই।

ডানদিকে ভাসমান ডিভিস ইত্যাদির জন্য বুটস্ট্র্যাপের "পুল-রাইট" থাকে।

বুটস্ট্র্যাপ 2.3 সবেমাত্র এসে পাঠ্য সারিবদ্ধ শৈলী যুক্ত করেছে:

বুটস্ট্র্যাপ 2.3 প্রকাশিত হয়েছে (2013-02-07)

Comments

হ্যাঁ আমি প্রতিটি উপাদানগুলিতে ইনলাইন স্টাইল ব্যবহার করতে চাই না। আমি টান ডান সম্পর্কে জানি কিন্তু আমি উপাদানগুলি ভাসমান চাইনি। যদি না থাকে তবে আমি কেবল একটি ক্লাস যুক্ত করতে পারি :)

— মেডিবায়েস্টনজ

Answer 7

বুটস্ট্র্যাপ 4 আসছে ! বুটস্ট্র্যাপে পরিচিত ইউটিলিটি ক্লাসগুলি 3.xএখন ব্রেক-পয়েন্ট সক্ষম। ডিফল্ট ব্রেকপয়েন্ট আছেন: xs, sm, md, lgএবং xl, তাই এই টেক্সট প্রান্তিককরণ শ্রেণীর মত দেখাবে .text-[breakpoint]-[alignnment]।

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

গুরুত্বপূর্ণ: এটি লেখার ক্ষেত্রে বুটস্ট্র্যাপ 4 কেবলমাত্র আলফা 2 তে রয়েছে These

Comments

বুটস্ট্র্যাপ 4 ইনস্টলেশন বুটস্ট্র্যাপ 3 ডক্স পড়ার সময় এটি আমাকে রক্ষা করতে পারে। অনুস্মারকটির জন্য ধন্যবাদ!

— বেন সিম্পসন

Answer 8

V3.3.5 এ পাঠ্য প্রান্তিককরণ বুটস্ট্র্যাপ করুন:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

কোডপেন উদাহরণ

Answer 9

নিম্নলিখিত কোডের লাইনগুলি সঠিকভাবে কাজ করছে। আপনি পাঠ্য-কেন্দ্র, বাম বা ডানদিকের মতো ক্লাসগুলি নির্ধারণ করতে পারেন, পাঠ্যটি সেই অনুযায়ী প্রান্তিককরণ করবে।

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

এখানে কোনও বাহ্যিক শ্রেণি তৈরি করার দরকার নেই। এগুলি বুটস্ট্র্যাপ ক্লাস এবং তাদের নিজস্ব সম্পত্তি আছে।

Answer 10

আপনি এই সিএসএস নীচে ব্যবহার করতে পারেন:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

Answer 11

.text-alignবর্গ সম্পূর্ণভাবে বৈধ এবং একটি থাকার চেয়ে বেশি উপভোগ্য .price-labelএবং .price-valueকোন কোনো কাজে যা।

আমি কাস্টম ইউটিলিটি ক্লাস নামে 100% যাওয়ার পরামর্শ দিচ্ছি

.text-right {
  text-align: right;
}

আমি কিছু যাদু করতে চাই তবে এটি আপনার উপর নির্ভর করে কোনও কিছুর মতো:

span.pull-right {
  float: none;
  text-align: right;
}

Comments

হ্যাঁ, প্রতিটি শ্রেণি পুরোপুরি "বৈধ", তবে এটি শব্দার্থক নয়। আপনার প্রোডাকশন কোডে কিছুটা হলেও ইউটিলিটি ক্লাস ব্যবহার করা উচিত, সেগুলি "বুটস্ট্র্যাপিং" এর জন্য।

— jonschlinkert

কারণ ডাব্লু 3 বলে যে ক্ল্যাস ব্যবহারের সঠিক উপায়টি এর অর্থ সেরা নয়। jQuery UI এবং বুটস্ট্র্যাপের অস্তিত্ব থাকত না কারণ 'অ-শব্দার্থবিজ্ঞান' ক্লাসগুলির কারণে ছিল। লোকেরা ক্লাইসের জন্য অর্থবোধক অর্থ ব্যবহার করতে থাকে যতক্ষণ না তারা উপলব্ধি করে যে জেনেরিকের পক্ষে যাওয়া সব দিক থেকে ভাল। প্রথমে এটি পাওয়া খুব কঠিন বা মনে হয় এটি আসলেই ভাল, আমি সেই রাস্তাটি হেঁটেছিলাম ...

— বার্ট ক্যালিক্স্টো

কারণ এটি একটি JavaScript লাইব্রেরি যে jQuery এর UI 'তে, একটি খারাপ উদাহরণ এছাড়াও সিএসএস, এবং বুটস্ট্র্যাপ, আমি নির্দিষ্ট, ইউটিলিটি হিসাবে ইউটিলিটি শ্রেণীর ব্যবহার করে। আপনি কি কখনো কেন বুটস্ট্র্যাপ বলা হয় সম্পর্কে চিন্তা বুটস্ট্র্যাপ ? যাতে আপনি এই ক্লাসগুলিকে বিকাশের জন্য ব্যবহার করতে পারেন এবং আপনার প্রোডাকশন কোডে এগুলি পরিবর্তন করতে পারেন। এবং আমি এগুলি ব্যবহার না করার জন্য বলিনি, আমি বেশ কিছুটা টান-বাম, টান-ডান ব্যবহার করি। এবং আমি মাঝে মাঝে পাঠ্য কেন্দ্রও ব্যবহার করি। তবে আমি এগুলিকে অল্প পরিমাণে ব্যবহার করি এবং আমি প্রথম পদক্ষেপের ক্রিয়া হিসাবে সুপারিশ করি না যে অন্যরা এগুলি আরও ভাল, আরও শব্দার্থক বিকল্পগুলির মাধ্যমে ব্যবহার করুন।

— jonschlinkert

jQuery ইউআই একটি উদাহরণ ছিল। আমি যে পদ্ধতির কথা বলছি তা হ'ল গ্রন্থাগারগুলি কী কাজ করে। আমরা কেন্দো, ব্লুপ্রিন্ট, গ্রিড, 960, চিকো ইউআই, এবং এমনকি বুটস্ট্র্যাপ নিজেই এটি করতে দেখতে পাই। এই লাইব্রেরিগুলির একমাত্র উপায় / কাজ থাকতে পারে। আপনি কীভাবে বড় বড় সংস্থাগুলি অ্যাপল ( ইমেজ.অ্যাপল.com / v / imac / a / styles / imac.css ) এর মতো সিএসএস ব্যবহার করছেন তা একবার দেখে নিতে পারেন এবং আপনি মুগ্ধ হবেন। এটি উত্পাদনশীলতা এবং একটি বিশাল বিষয়গুলির জন্য অ্যাকাউন্ট। অবশ্যই সত্য কথা বলতে পারি, আমি অবাক হয়ে গিয়েছিলাম এবং এর কোনও ব্যাখ্যা দেওয়ার মতো টিউটোরিয়াল আমি পাইনি। আমি মনে করি বুটস্ট্র্যাপ শব্দটি এটি because কারণ কারণ এটি আপনাকে আরম্ভ করতে হবে, পরে পরিবর্তিত হবে না।

— বার্ট ক্যালিক্স্টো

Answer 12

ডেভিডের উত্তরটি প্রসারিত করে , আমি এই জাতীয় বুটস্ট্র্যাপ বাড়ানোর জন্য একটি সাধারণ ক্লাস যুক্ত করেছি:

.money, .number {
    text-align: right !important;
}

Answer 13

এখানে একটি উদাহরণ সহ একটি সংক্ষিপ্ত এবং মিষ্টি উত্তর।

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

Comments

এইচটিএমএল ট্যাগ নেই linkএবং scriptবৈধ বাহিরে headবা bodyট্যাগ? কেন একটি সম্পূর্ণ এবং বৈধ এইচটিএমএল দস্তাবেজের উদাহরণ সরবরাহ করবেন না?

— পিটার মর্টেনসেন

Answer 14

ও, বুটস্ট্র্যাপ 3 প্রকাশের সাথে সাথে, আপনি text-centerকেন্দ্রের প্রান্তিককরণের text-left জন্য, বাম প্রান্তিককরণের text-rightজন্য, ডান প্রান্তিককরণের text-justifyজন্য এবং ন্যায়সঙ্গত প্রান্তিককরণের জন্য ক্লাস ব্যবহার করতে পারেন ।

আপনি এটি ব্যবহার করার পরে বুটস্ট্র্যাপটি কাজ করার জন্য একটি খুব সহজ ফ্রন্টএন্ড ফ্রেমওয়ার্ক। পাশাপাশি আপনার পছন্দ অনুসারে কাস্টমাইজ করা খুব সহজ।

Answer 15

এর জন্য আমাদের পাঁচটি ক্লাস রয়েছে, যা আপনি এখান থেকে উল্লেখ করতে পারেন: http://v4-alpha.getbootstrap.com/components/utilities/

<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text.</div>
<div class="text-nowrap">No wrap text.</div>

Answer 16

এখানে সহজ সমাধান

আপনি পাঠ্য-কেন্দ্র, বাম বা ডান মতো ক্লাস নির্ধারণ করতে পারেন। পাঠ্য এই ক্লাস অনুসারে সারিবদ্ধ হবে। আপনার আলাদাভাবে ক্লাস করতে হবে না। এই ক্লাসগুলি বুটস্ট্র্যাপ 3-এ অন্তর্নির্মিত

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

এখানে চেক করুন: ডেমো

Answer 17

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

ভিউপোর্টের আকারের এমডি (মাঝারি) বা আরও বিস্তৃত বাম প্রান্তিক পাঠ্য।

ভিউপোর্টে সাইজের এলজি (বৃহত্তর) বা আরও বিস্তৃত বাম প্রান্তিক পাঠ্য।

ভিউপোর্টের আকারের এক্সএল (অতিরিক্ত-বৃহত্তর) বা আরও বিস্তৃত বাম প্রান্তিক পাঠ্য।

Answer 18

বুটস্ট্র্যাপ সংস্করণ ৪-এ পাঠ্য অবস্থানের জন্য কিছু অন্তর্নির্মিত ক্লাস রয়েছে।

সারণী শিরোনাম এবং ডেটা পাঠ্য কেন্দ্রীকরণের জন্য:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

আপনি যে কোনও পাঠ্য অবস্থানের জন্য এই ক্লাসগুলিও ব্যবহার করতে পারেন।

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>

বিস্তারিত জানার জন্য

আশা করি এটি আপনাকে সাহায্য করবে

Answer 19

এই তিন শ্রেণিতে বুটস্ট্র্যাপ অবৈধ ক্লাস

 .text-right {
     text-align: right; }

 .text-center {
     text-align: center; }

 .text-left {
    text-align: left; }

Comments

ইতিমধ্যে এই প্রশ্নের বেশ কয়েকটি উচ্চ মানের উত্তর রয়েছে, যার বেশিরভাগই তিন বছর আগে পোস্ট করা হয়েছিল যখন প্রশ্ন জিজ্ঞাসা করা হয়েছিল। আপনার প্রোগ্রামিং সক্ষমতা আরও বাড়ানোর জন্য এই যেমন সাধারণ প্রশ্নের উত্তর দেওয়ার চেষ্টা করা সার্থক অনুশীলন হতে পারে তবে বর্তমান উত্তরটিতে এই উত্তরটি পোস্ট করা প্রশ্নের সাথে কিছু যুক্ত করে না। যদি আপনার উত্তর সম্পর্কে কিছু উপন্যাস থাকে তবে দয়া করে এটি কীভাবে আলাদা এবং এটি কেন আরও ভাল করে তোলে তা বোঝাতে একটি দুটি বাক্য নিন।

— এমটিসিওস্টার

"এই তিন শ্রেণির বুটস্ট্র্যাপ অবৈধ শ্রেণিতে" বলতে কী বোঝ ? তুমি কি বিস্তারিত বলতে পারো? বিশেষত, "অবৈধ শ্রেণীর" জন্য ।

— পিটার মর্টেনসেন

Answer 20

ব্যবহার text-align:center !important। অন্যান্য text-alignসিএসএস বিধি থাকতে পারে তাই এটি !importantগুরুত্বপূর্ণ।

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>