ପୁନ o ଚାଳନ କରନ୍ତୁ |
ପୁନ o ବୁଟ୍, ଗୋଟିଏ ଫାଇଲରେ ଉପାଦାନ-ନିର୍ଦ୍ଦିଷ୍ଟ CSS ପରିବର୍ତ୍ତନଗୁଡ଼ିକର ଏକ ସଂଗ୍ରହ, ଏକ ସୁସଜ୍ଜିତ, ସ୍ଥିର ଏବଂ ସରଳ ବେସ୍ ଲାଇନ୍ ଯୋଗାଇବା ପାଇଁ କିକଷ୍ଟାର୍ଟ ବୁଟଷ୍ଟ୍ରାପ୍ |
ଉପାୟ
ପୁନ element ବୁଟ ନର୍ମାଲାଇଜ୍ ଉପରେ ନିର୍ମିତ, କେବଳ HTML ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରି କିଛି HTML ଶ elements ଳୀ ସହିତ ଅନେକ HTML ଉପାଦାନ ପ୍ରଦାନ କରିଥାଏ | ଅତିରିକ୍ତ ଷ୍ଟାଇଲ୍ କେବଳ କ୍ଲାସ୍ ସହିତ କରାଯାଇଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ <table>
ଏକ ସରଳ ବେସ୍ ଲାଇନ୍ ପାଇଁ କିଛି ଶ yles ଳୀକୁ ପୁନ bo ବୁଟ କରୁ ଏବଂ ପରେ ପ୍ରଦାନ .table
, .table-bordered
ଏବଂ ଅଧିକ |
ପୁନ o ବୁଟରେ କ’ଣ ନବଲିଖନ କରାଯିବ ତାହା ବାଛିବା ପାଇଁ ଏଠାରେ ଆମର ନିର୍ଦ୍ଦେଶାବଳୀ ଏବଂ କାରଣଗୁଡ଼ିକ ଅଛି:
- ମାପନୀୟ ଉପାଦାନ ବ୍ୟବଧାନ ପାଇଁ
rem
s ପରିବର୍ତ୍ତେ s ବ୍ୟବହାର କରିବାକୁ କିଛି ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଅଦ୍ୟତନ କରନ୍ତୁ |em
- ଏଡ଼ାନ୍ତୁ
margin-top
| ଭର୍ଟିକାଲ୍ ମାର୍ଜିନଗୁଡିକ ନଷ୍ଟ ହୋଇପାରେ, ଅପ୍ରତ୍ୟାଶିତ ଫଳାଫଳ ଦେଇଥାଏ | ସବୁଠାରୁ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ କଥା ହେଉଛି, ଗୋଟିଏ ଦିଗmargin
ହେଉଛି ଏକ ସରଳ ମାନସିକ ମଡେଲ | - ଡିଭାଇସ୍ ଆକାରରେ ସହଜ ମାପିବା ପାଇଁ, ବ୍ଲକ୍ ଉପାଦାନଗୁଡିକ
rem
s ପାଇଁmargin
s ବ୍ୟବହାର କରିବା ଉଚିତ୍ | - ଯେତେବେଳେ ସମ୍ଭବ
font
ବ୍ୟବହାର କରି ସମ୍ପର୍କିତ ଗୁଣଗୁଡିକର ଘୋଷଣାକୁ ସର୍ବନିମ୍ନ ରଖନ୍ତୁ |inherit
ପୃଷ୍ଠା ଡିଫଲ୍ଟ |
ଉନ୍ନତ ପୃଷ୍ଠା-ଡିଫଲ୍ଟ ପ୍ରଦାନ କରିବାକୁ ଏବଂ ଉପାଦାନଗୁଡିକ ଅଦ୍ୟତନ କରାଯାଇଥାଏ <html>
| <body>
ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ:
- ସର୍ବଭାରତୀୟ
box-sizing
ସ୍ତରରେ ପ୍ରତ୍ୟେକ ଉପାଦାନ ଉପରେ ସେଟ୍ ହୋଇଛି -*::before
ଏବଂ ଅନ୍ତର୍ଭୂକ୍ତ*::after
କରିborder-box
| ଏହା ସୁନିଶ୍ଚିତ କରେ ଯେ ପ୍ୟାଡିଂ କିମ୍ବା ସୀମା ହେତୁ ଉପାଦାନର ଘୋଷିତ ମୋଟେଇ କେବେବି ଅତିକ୍ରମ କରିବ ନାହିଁ |- ଉପରେ କ base ଣସି ଆଧାର
font-size
ଘୋଷିତ ହୋଇନାହିଁ<html>
, କିନ୍ତୁ16px
ଅନୁମାନ କରାଯାଏ (ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ) | ବ୍ୟବହାରକାରୀଙ୍କ ପସନ୍ଦକୁ ସମ୍ମାନ ଦେବା ଏବଂ ଅଧିକ ସୁଗମ ଆଭିମୁଖ୍ୟ ନିଶ୍ଚିତ କରିବାବେଳେ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ମାଧ୍ୟମରେ ସହଜ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାର-ସ୍କେଲିଂ ପାଇଁfont-size: 1rem
ପ୍ରୟୋଗ କରାଯାଏ |<body>
- ଉପରେ କ base ଣସି ଆଧାର
- ଏହା
<body>
ମଧ୍ୟ ଏକ ବିଶ୍ୱସ୍ତରୀୟfont-family
,line-height
ଏବଂtext-align
। ଫଣ୍ଟ ଅସଙ୍ଗତିକୁ ରୋକିବା ପାଇଁ ଏହା ପରେ କିଛି ଫର୍ମ ଉପାଦାନ ଦ୍ୱାରା ଉତ୍ତରାଧିକାରୀ | - ନିରାପତ୍ତା ପାଇଁ , ଡିଫଲ୍ଟ ଭାବରେ
<body>
ଏକ ଘୋଷିତ ହୋଇଛି |background-color
#fff
ଦେଶୀ ଫଣ୍ଟ ଷ୍ଟାକ |
ଡିଫଲ୍ଟ ୱେବ୍ ଫଣ୍ଟଗୁଡିକ (ହେଲଭେଟିକା ନେଉ, ହେଲଭେଟିକା, ଏବଂ ଆରିଆଲ୍) ବୁଟଷ୍ଟ୍ରାପ୍ 4 ରେ ଡ୍ରପ୍ ହୋଇଛି ଏବଂ ପ୍ରତ୍ୟେକ ଡିଭାଇସ୍ ଏବଂ OS ରେ ଉତ୍କୃଷ୍ଟ ପାଠ୍ୟ ପ୍ରଦର୍ଶନ ପାଇଁ ଏକ “ଦେଶୀ ଫଣ୍ଟ୍ ଷ୍ଟାକ” ସହିତ ସ୍ଥାନିତ ହୋଇଛି | ଏହି ସ୍ମାଶିଂ ମ୍ୟାଗେଜିନ ପ୍ରବନ୍ଧରେ ଦେଶୀ ଫଣ୍ଟ ଷ୍ଟାକ ବିଷୟରେ ଅଧିକ ପ .଼ନ୍ତୁ |
ଏହା ବୁଟଷ୍ଟ୍ରାପରେ ସମଗ୍ର ବିଶ୍ୱରେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଉତ୍ତରାଧିକାରୀ ଭାବରେ font-family
ପ୍ରୟୋଗ କରାଯାଏ | <body>
ଗ୍ଲୋବାଲ୍ ସୁଇଚ୍ କରିବାକୁ , ବୁଟଷ୍ଟ୍ରାପ୍ font-family
ଅପଡେଟ୍ ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |$font-family-base
ଶିରୋନାମା ଏବଂ ଅନୁଚ୍ଛେଦ |
ସମସ୍ତ ହେଡିଙ୍ଗ୍ ଉପାଦାନଗୁଡିକ - ଯଥା, <h1>
- ଏବଂ <p>
ସେଗୁଡିକ ଅପସାରଣ କରିବାକୁ ପୁନ res ସେଟ୍ ହୋଇଛି margin-top
| ସହଜ ବ୍ୟବଧାନ ପାଇଁ ହେଡିଙ୍ଗ୍ margin-bottom: .5rem
ଯୋଡିଛି ଏବଂ ପାରାଗ୍ରାଫ୍ |margin-bottom: 1rem
ଶୀର୍ଷଲେଖ | ଉଦାହରଣ | |
---|---|
|
h1 ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ | |
|
h2। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ | |
|
h3। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ | |
|
h4। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ | |
|
h5। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ | |
|
h6। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ | |
ତାଲିକା |
ସମସ୍ତ ତାଲିକା - , ଏବଂ, <ul>
ସେମାନଙ୍କର ଅପସାରିତ ହୋଇଛି ଏବଂ a । ନେଷ୍ଟେଡ୍ ତାଲିକାଗୁଡ଼ିକରେ ନାହିଁ |<ol>
<dl>
margin-top
margin-bottom: 1rem
margin-bottom
- ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
- କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
- ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
- ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
- Nulla volutpat aliquam velit |
- ଫାସେଲସ୍ ଆଇକୁଲିସ୍ ନେକ୍ |
- ପୁରସ୍ ସୋଡାଲ୍ ଅଲଟ୍ରିକସ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ ଲୋରାଇଟ୍ ପୋର୍ଟିଟର୍ ସେମ୍ |
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel |
- ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
- ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |
- ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
- କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
- ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
- ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
- Nulla volutpat aliquam velit |
- Faucibus porta lacus fringilla vel |
- ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
- ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |
ସରଳ ଶ yl ଳୀ, ସ୍ୱଚ୍ଛ ହାଇରାର୍କି ଏବଂ ଉନ୍ନତ ବ୍ୟବଧାନ ପାଇଁ, ବର୍ଣ୍ଣନା ତାଲିକାଗୁଡ଼ିକ ଅଦ୍ୟତନ ହୋଇଛି margin
| <dd>
କୁ ପୁନ res ସେଟ୍ margin-left
କରନ୍ତୁ 0
ଏବଂ ଯୋଡନ୍ତୁ margin-bottom: .5rem
| <dt>
s ବୋଲ୍ଡ ହୋଇଛି |
- ବର୍ଣ୍ଣନା ତାଲିକା |
- ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
- ଇଉଜିମୋଡ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ id ligula porta felis euismod semper eget lacinia odio sem।
- Eget metus ରେ Donec id elit non mi porta gravida |
- ମାଲେସୁଆଡା ପୋର୍ଟା |
- Etiam porta sem maleuada magna mollis euismod |
ପ୍ରିଫର୍ମଡ୍ ଟେକ୍ସଟ୍ |
ଏହାର ଅପସାରଣ ଏବଂ ଏହାର ପାଇଁ ୟୁନିଟ୍ ବ୍ୟବହାର <pre>
କରିବାକୁ ଉପାଦାନ ପୁନ res ସେଟ୍ ହୋଇଛି |margin-top
rem
margin-bottom
.example-element { ମାର୍ଜିନ୍-ତଳ: 1rem; }
ଟେବୁଲ୍ |
ଟେବୁଲଗୁଡିକ ଶ style ଳୀରେ ସାମାନ୍ୟ ଆଡଜଷ୍ଟ ହୋଇଛି <caption>
, ସୀମା ଭୁଶୁଡ଼ିବା, ଏବଂ text-align
ସମଗ୍ର ସ୍ଥିରତାକୁ ସୁନିଶ୍ଚିତ କରେ | ସୀମା, ପ୍ୟାଡିଂ, ଏବଂ ଅଧିକ ପାଇଁ ଅତିରିକ୍ତ ପରିବର୍ତ୍ତନ ଶ୍ରେଣୀ ସହିତ.table
ଆସେ |
ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ | | ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ | | ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ | | ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ | |
---|---|---|---|
ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | |
ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | |
ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | | ଟେବୁଲ୍ ସେଲ୍ | |
ଫର୍ମଗୁଡିକ
ସରଳ ଆଧାର ଶ yles ଳୀ ପାଇଁ ବିଭିନ୍ନ ଫର୍ମ ଉପାଦାନଗୁଡିକ ପୁନ bo ବୁଟ କରାଯାଇଛି | ଏଠାରେ କେତେକ ଉଲ୍ଲେଖନୀୟ ପରିବର୍ତ୍ତନ ଅଛି:
<fieldset>
s ର କ borders ଣସି ସୀମା, ପ୍ୟାଡିଂ, କିମ୍ବା ମାର୍ଜିନ୍ ନାହିଁ ତେଣୁ ସେଗୁଡିକ ବ୍ୟକ୍ତିଗତ ଇନପୁଟ୍ କିମ୍ବା ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ପାଇଁ ସହଜରେ ରାପର୍ ଭାବରେ ବ୍ୟବହାର କରାଯାଇପାରିବ |<legend>
s, ଫିଲ୍ଡସେଟ୍ ପରି, ଏକ ପ୍ରକାରର ହେଡିଙ୍ଗ୍ ଭାବରେ ପ୍ରଦର୍ଶିତ ହେବା ପାଇଁ ପୁନ y ଚାଳିତ ହୋଇଛି |<label>
s ପ୍ରୟୋଗdisplay: inline-block
କରିବାକୁ ଅନୁମତି ଦେବାକୁ ସେଟ୍ ହୋଇଛି |margin
<input>
s,<select>
s,<textarea>
s, ଏବଂ<button>
s ଗୁଡିକ ସାଧାରଣତ Normal ନର୍ମାଲାଇଜ୍ ଦ୍ୱାରା ସମ୍ବୋଧିତ ହୁଏ, କିନ୍ତୁ ପୁନ o ବୁଟ୍ ସେମାନଙ୍କରmargin
ଏବଂ ସେଟ୍ଗୁଡ଼ିକୁline-height: inherit
ମଧ୍ୟ ଅପସାରଣ କରେ |<textarea>
s ଗୁଡିକ କେବଳ ଭୂଲମ୍ବ ଭାବରେ ରିଜାଇଜେବଲ୍ ହେବା ପାଇଁ ପରିବର୍ତ୍ତିତ ହୋଇଛି ଯେହେତୁ ଭୂସମାନ୍ତର ଆକାର ଆକାର ପ୍ରାୟତ ““ ବ୍ରେକ୍ ”ପୃଷ୍ଠା ଲେଆଉଟ୍ |<button>
s ଏବଂ<input>
ବଟନ୍ ଉପାଦାନଗୁଡ଼ିକcursor: pointer
କେବେ ଅଛି:not(:disabled)
|
ଏହି ପରିବର୍ତ୍ତନଗୁଡିକ, ଏବଂ ଅଧିକ, ନିମ୍ନରେ ପ୍ରଦର୍ଶିତ ହୋଇଛି |
ବିଭିନ୍ନ ଉପାଦାନଗୁଡିକ |
ଠିକଣା
ବ୍ରାଉଜରକୁ ଡିଫଲ୍ଟରୁ <address>
ପୁନ res ସେଟ୍ କରିବାକୁ ଉପାଦାନକୁ ଅଦ୍ୟତନ କରାଯାଇଛି | ବର୍ତ୍ତମାନ ମଧ୍ୟ ଉତ୍ତରାଧିକାରୀ ଅଟେ, ଏବଂ ଯୋଗ କରାଯାଇଛି | s ନିକଟତମ ପିତୃପୁରୁଷ (କିମ୍ବା କାର୍ଯ୍ୟର ଏକ ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର) ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ଉପସ୍ଥାପନ କରିବା ପାଇଁ | ରେଖା ସହିତ ଶେଷ କରି ଫର୍ମାଟିଂ ସଂରକ୍ଷଣ କରନ୍ତୁ |font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 ମାର୍କେଟ ଷ୍ଟ, ସୁଟ୍ 900
ସାନ ଫ୍ରାନ୍ସିସ୍କୋ, CA 94103
ପି: (123) 456-7890 | ପୂର୍ଣ୍ଣ ନାମ
[email protected]
ବ୍ଲକକୋଟ |
ବ୍ଲକ୍କୋଟଗୁଡିକରେ ଡିଫଲ୍ଟ margin
ହେଉଛି 1em 40px
, ତେଣୁ ଆମେ 0 0 1rem
ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ଅଧିକ ସୁସଙ୍ଗତ କିଛି ପାଇଁ ଏହାକୁ ପୁନ res ସେଟ୍ କରୁ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଂ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |
ଇନଲାଇନ୍ ଉପାଦାନଗୁଡିକ |
ଏହାକୁ ପାରାଗ୍ରାଫ୍ ଟେକ୍ସଟ୍ ମଧ୍ୟରେ ଛିଡା କରିବା ପାଇଁ <abbr>
ଉପାଦାନ ମ basic ଳିକ ଶ yl ଳୀ ଗ୍ରହଣ କରେ |
ସାରାଂଶ
cursor
ସାରାଂଶ ଉପରେ ଡିଫଲ୍ଟ ହେଉଛି text
, ତେଣୁ ଆମେ pointer
ଏହାକୁ ପୁନ res ସେଟ୍ କରୁ ଯେ ଏହା ଉପରେ କ୍ଲିକ୍ କରି ଉପାଦାନ ସହିତ ଯୋଗାଯୋଗ ହୋଇପାରିବ |
କିଛି ବିବରଣୀ
ବିବରଣୀ ବିଷୟରେ ଅଧିକ ସୂଚନା |
ଏପରିକି ଅଧିକ ବିବରଣୀ |
ସବିଶେଷ ବିବରଣୀ ବିଷୟରେ ଏଠାରେ ଅଧିକ ବିବରଣୀ ଅଛି |
HTML5 [hidden]
ଗୁଣ
HTML5 ନାମକ ଏକ ନୂତନ ଗ୍ଲୋବାଲ୍ ଆଟ୍ରିବ୍ୟୁଟ୍[hidden]
display: none
ଯୋଡିଥାଏ, ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ଷ୍ଟାଇଲ୍ ହୋଇଥାଏ | PureCSS ରୁ ଏକ ଧାରଣା owing ଣ , ଆମେ ଏହି ଡିଫଲ୍ଟରେ ଉନ୍ନତି କରି ଏହାକୁ ଅଜାଣତରେ ନବଲିଖନ [hidden] { display: none !important; }
କରିବାରେ ସାହାଯ୍ୟ କରିବା | display
ଯଦିଓ [hidden]
IE10 ଦ୍ native ାରା ସ୍ଥାନୀୟ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ, ଆମର CSS ରେ ସ୍ପଷ୍ଟ ଘୋଷଣା ସେହି ସମସ୍ୟାର ସମାଧାନ କରେ |
jQuery ଅସଙ୍ଗତି |
[hidden]
$(...).hide()
jQuery ଏବଂ $(...).show()
ପଦ୍ଧତି ସହିତ ସୁସଙ୍ଗତ ନୁହେଁ | ତେଣୁ, ଆମେ ଉପାଦାନଗୁଡ଼ିକର [hidden]
ପରିଚାଳନା ପାଇଁ ଅନ୍ୟାନ୍ୟ କ ques ଶଳକୁ ବିଶେଷ ଭାବରେ ସମର୍ଥନ କରୁନାହୁଁ |display
କେବଳ ଏକ ଉପାଦାନର ଦୃଶ୍ୟତାକୁ ଟୋଗଲ୍ କରିବାକୁ, ଏହାର ଅର୍ଥ display
ଏହା ପରିବର୍ତ୍ତିତ ହୋଇନାହିଁ ଏବଂ ଉପାଦାନଟି ତଥାପି ଡକ୍ୟୁମେଣ୍ଟର ପ୍ରବାହକୁ ପ୍ରଭାବିତ କରିପାରିବ, ଏହା ବଦଳରେ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ.invisible
|