বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ গ্লিফআইকন


গ্লিফআইকন

বুটস্ট্রাপে ২৬০ টি গ্লিফআইকন রয়েছে।

গ্লিফআইকন ইচ্ছেমতো টেক্সট, বাটন, টুলবার, নেভিগেশন, ফর্ম ইত্যাদিতে ব্যবহার করা যায়।

নিচে গ্লিফআইকনের কিছু উদাহরণ দেওয়া হলোঃ

সার্চ গ্লিফআইকনঃ

প্রিন্ট গ্লিফআইকনঃ

এনভেলাপ গ্লিফআইকনঃ

ডাউনলোডঃ


গ্লিফআইকন ব্যবহার করার পদ্ধতি

নিচে গ্লিফআইকন ব্যবহারের পদ্ধতি দেখনো হয়েছেঃ

উদাহরণ

<span class="glyphicon glyphicon-name"></span>

এখানে name অংশে অবশ্যই গ্লিফআইকনের নাম দিতে হবে।


গ্লিফআইকনের উদাহরণ

নিচের উদাহরনে গ্লিফআইকনের বিভিন্ন ব্যবহার দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Glyphicon Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.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>
   </head>

  <body>

		<div class="container">
			<h2>গ্লিফ-আইকনের উদাহরণ</h2>
			<p>এনভেলাপ আইকন: <span class="glyphicon glyphicon-envelope"></span></p>
			<p>লিংক হিসেবে একটি এনভেলাপ আইকন:
				<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
			</p>
			<p>সার্চ আইকন: <span class="glyphicon glyphicon-search"></span></p>
			<p>বাটনের মধ্যে একটি সার্চ আইকন:
				<button type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-search"></span> সার্চ
				</button>
			</p>
			<p>স্টাইল করা বাটনের মধ্যে একটি সার্চ আইকন:
				<button type="button" class="btn btn-info">
				<span class="glyphicon glyphicon-search"></span> সার্চ
				</button>
			</p>
			<p>প্রিন্ট আইকন: <span class="glyphicon glyphicon-print"></span></p>
			<p>স্টাইল করা লিংক বাটনের মধ্যে একটি প্রিন্ট আইকন:
				<a href="#" class="btn btn-success btn-lg">
				<span class="glyphicon glyphicon-print"></span> প্রিন্ট
				</a>
			</p>
		</div>

  </body>
</html>

ফলাফল




বুটস্ট্রাপের জন্য অন্যান্য গ্লিফআইকন সমূহঃ

গ্লিফআইকন ক্লাস
glypicon glyphicon-asterisk
glypicon glyphicon-plus
glypicon glyphicon-minus
glypicon glyphicon-euro
glypicon glyphicon-cloud
glypicon glyphicon-envelope
glypicon glyphicon-pencil
glypicon glyphicon-glass
glypicon glyphicon-music
glypicon glyphicon-search
glypicon glyphicon-heart
glypicon glyphicon-star
glypicon glyphicon-star-empty
glypicon glyphicon-user
glypicon glyphicon-film
glypicon glyphicon-th-large
glypicon glyphicon-th
glypicon glyphicon-th-list
glypicon glyphicon-ok
glypicon glyphicon-remove
glypicon glyphicon-zoom-in
glypicon glyphicon-zoom-out
glypicon glyphicon-off
glypicon glyphicon-signal
glypicon glyphicon-cog
glypicon glyphicon-trash
glypicon glyphicon-home
glypicon glyphicon-file
glypicon glyphicon-time
glypicon glyphicon-road
glypicon glyphicon-download-alt
glypicon glyphicon-download
glypicon glyphicon-upload
glypicon glyphicon-inbox
glypicon glyphicon-play-circle
glypicon glyphicon-repeat
glypicon glyphicon-refresh
glypicon glyphicon-list-alt
glypicon glyphicon-lock
glypicon glyphicon-flag
glypicon glyphicon-headphones
glypicon glyphicon-volume-off
glypicon glyphicon-volume-down
glypicon glyphicon-volume-up
glypicon glyphicon-qrcode
glypicon glyphicon-barcode
glypicon glyphicon-tag
glypicon glyphicon-tags
glypicon glyphicon-book
glypicon glyphicon-bookmark
glypicon glyphicon-print
glypicon glyphicon-camera
glypicon glyphicon-font
glypicon glyphicon-bold
glypicon glyphicon-italic
glypicon glyphicon-text-height
glypicon glyphicon-text-width
glypicon glyphicon-align-left
glypicon glyphicon-align-center
glypicon glyphicon-align-right
glypicon glyphicon-align-justify
glypicon glyphicon-list
glypicon glyphicon-indent-left
glypicon glyphicon-indent-right
glypicon glyphicon-facetime-video
glypicon glyphicon-picture
glypicon glyphicon-map-marker
glypicon glyphicon-adjust
glypicon glyphicon-tint
glypicon glyphicon-edit
glypicon glyphicon-share
glypicon glyphicon-check
glypicon glyphicon-move
glypicon glyphicon-step-backward
glypicon glyphicon-fast-backward
glypicon glyphicon-backward
glypicon glyphicon-play
glypicon glyphicon-pause
glypicon glyphicon-stop
glypicon glyphicon-forward
glypicon glyphicon-fast-forward
glypicon glyphicon-step-forward
glypicon glyphicon-eject
glypicon glyphicon-chevron-left
glypicon glyphicon-chevron-right
glypicon glyphicon-plus-sign
glypicon glyphicon-minus-sign
glypicon glyphicon-remove-sign
glypicon glyphicon-ok-sign
glypicon glyphicon-question-sign
glypicon glyphicon-info-sign
glypicon glyphicon-screenshot
glypicon glyphicon-remove-circle
glypicon glyphicon-ok-circle
glypicon glyphicon-ban-circle
glypicon glyphicon-arrow-left
glypicon glyphicon-arrow-right
glypicon glyphicon-arrow-up
glypicon glyphicon-arrow-down
glypicon glyphicon-share-alt
glypicon glyphicon-resize-full
glypicon glyphicon-resize-small
glypicon glyphicon-exclamation-sign
glypicon glyphicon-gift
glypicon glyphicon-leaf
glypicon glyphicon-fire
glypicon glyphicon-eye-open
glypicon glyphicon-eye-close
glypicon glyphicon-warning-sign
glypicon glyphicon-plane
glypicon glyphicon-calendar
glypicon glyphicon-random
glypicon glyphicon-comment
glypicon glyphicon-magnet
glypicon glyphicon-chevron-up
glypicon glyphicon-chevron-down
glypicon glyphicon-retweet
glypicon glyphicon-shopping-cart
glypicon glyphicon-folder-close
glypicon glyphicon-folder-open
glypicon glyphicon-resize-vertical
glypicon glyphicon-resize-horizontal
glypicon glyphicon-hdd
glypicon glyphicon-bullhorn
glypicon glyphicon-bell
glypicon glyphicon-certificate
glypicon glyphicon-thumbs-up
glypicon glyphicon-thumbs-down
glypicon glyphicon-hand-right
glypicon glyphicon-hand-left
glypicon glyphicon-hand-up
glypicon glyphicon-hand-down
glypicon glyphicon-circle-arrow-right
glypicon glyphicon-circle-arrow-left
glypicon glyphicon-circle-arrow-up
glypicon glyphicon-circle-arrow-down
glypicon glyphicon-globe
glypicon glyphicon-wrench
glypicon glyphicon-tasks
glypicon glyphicon-filter
glypicon glyphicon-briefcase
glypicon glyphicon-fullscreen
glypicon glyphicon-dashboard
glypicon glyphicon-paperclip
glypicon glyphicon-heart-empty
glypicon glyphicon-link
glypicon glyphicon-phone
glypicon glyphicon-pushpin
glypicon glyphicon-usd
glypicon glyphicon-gbp
glypicon glyphicon-sort
glypicon glyphicon-sort-by-alphabet
glypicon glyphicon-sort-by-alphabet-alt
glypicon glyphicon-sort-by-order
glypicon glyphicon-sort-by-order-alt
glypicon glyphicon-sort-by-attributes
glypicon glyphicon-sort-by-attributes-alt
glypicon glyphicon-unchecked
glypicon glyphicon-expand
glypicon glyphicon-collapse-down
glypicon glyphicon-collapse-up
glypicon glyphicon-log-in
glypicon glyphicon-flash
glypicon glyphicon-log-out
glypicon glyphicon-new-window
glypicon glyphicon-record
glypicon glyphicon-save
glypicon glyphicon-open
glypicon glyphicon-saved
glypicon glyphicon-import
glypicon glyphicon-export
glypicon glyphicon-send
glypicon glyphicon-floppy-disk
glypicon glyphicon-floppy-saved
glypicon glyphicon-floppy-remove
glypicon glyphicon-floppy-save
glypicon glyphicon-floppy-open
glypicon glyphicon-credit-card
glypicon glyphicon-transfer
glypicon glyphicon-cutlery
glypicon glyphicon-header
glypicon glyphicon-compressed
glypicon glyphicon-earphone
glypicon glyphicon-phone-alt
glypicon glyphicon-tower
glypicon glyphicon-stats
glypicon glyphicon-sd-video
glypicon glyphicon-hd-video
glypicon glyphicon-subtitles
glypicon glyphicon-sound-stereo
glypicon glyphicon-sound-dolby
glypicon glyphicon-sound-5-1
glypicon glyphicon-sound-6-1
glypicon glyphicon-sound-7-1
glypicon glyphicon-copyright-mark
glypicon glyphicon-registration-mark
glypicon glyphicon-cloud-download
glypicon glyphicon-cloud-upload
glypicon glyphicon-tree-conifer
glypicon glyphicon-tree-deciduous
glypicon glyphicon-cd
glypicon glyphicon-save-file
glypicon glyphicon-open-file
glypicon glyphicon-level-up
glypicon glyphicon-copy
glypicon glyphicon-paste
glypicon glyphicon-alert
glypicon glyphicon-equalizer
glypicon glyphicon-king
glypicon glyphicon-queen
glypicon glyphicon-pawn
glypicon glyphicon-bishop
glypicon glyphicon-knight
glypicon glyphicon-baby-formula
glypicon glyphicon-tent
glypicon glyphicon-blackboard
glypicon glyphicon-bed
glypicon glyphicon-apple
glypicon glyphicon-erase
glypicon glyphicon-hourglass
glypicon glyphicon-lamp
glypicon glyphicon-duplicate
glypicon glyphicon-piggy-bank
glypicon glyphicon-scissors
glypicon glyphicon-bitcoin
glypicon glyphicon-yen
glypicon glyphicon-ruble
glypicon glyphicon-scale
glypicon glyphicon-ice-lolly
glypicon glyphicon-ice-lolly-tasted
glypicon glyphicon-education
glypicon glyphicon-option-horizontal
glypicon glyphicon-option-vertical
glypicon glyphicon-menu-hamburger
glypicon glyphicon-modal-window
glypicon glyphicon-oil
glypicon glyphicon-grain
glypicon glyphicon-sunglasses
glypicon glyphicon-text-size
glypicon glyphicon-text-color
glypicon glyphicon-text-background
glypicon glyphicon-object-align-top
glypicon glyphicon-object-align-bottom
glypicon glyphicon-object-align-horizontal
glypicon glyphicon-object-align-left
glypicon glyphicon-object-align-vertical
glypicon glyphicon-object-align-right
glypicon glyphicon-triangle-right
glypicon glyphicon-triangle-left
glypicon glyphicon-triangle-bottom
glypicon glyphicon-triangle-top
glypicon glyphicon-superscript
glypicon glyphicon-subscript
glypicon glyphicon-menu-left
glypicon glyphicon-menu-right
glypicon glyphicon-menu-down
glypicon glyphicon-menu-up