in English

पुनः आरभत

Reboot, एकस्मिन् सञ्चिकायां तत्वविशिष्ट CSS परिवर्तनस्य संग्रहः, Bootstrap इत्यस्य निर्माणार्थं सुरुचिपूर्णं, सुसंगतं, सरलं च आधाररेखां प्रदातुं kickstart करोति ।

समीपगमनम्‌

Reboot Normalize इत्यस्य उपरि निर्मितं भवति, केवलं element selectors इत्यस्य उपयोगेन किञ्चित् मतयुक्तशैल्याः सह अनेकाः HTML elements प्रदाति । अतिरिक्त स्टाइलिंग् केवलं वर्गैः सह क्रियते। यथा, वयं <table>सरलतरस्य आधाररेखायाः कृते काश्चन शैल्याः पुनः आरभामः पश्चात् .table, .table-bordered, इत्यादीनि च प्रदामः ।

अत्र अस्माकं मार्गदर्शिकाः कारणानि च सन्ति यत् Reboot मध्ये किं ओवरराइड् कर्तव्यम् इति चयनं भवति:

  • स्केल-योग्य-घटक-अन्तरालस्य कृते rems इत्यस्य स्थाने s इत्यस्य उपयोगाय केचन ब्राउजर्-पूर्वनिर्धारित-मूल्यानि अद्यतनं कुर्वन्तु ।em
  • परिहरन्तु margin-top. ऊर्ध्वाधरमार्जिन्स् पतितुं शक्नुवन्ति, येन अप्रत्याशितफलं प्राप्यते । अधिकं महत्त्वपूर्णं तु, एकं दिशां marginसरलतरं मानसिकं प्रतिरूपम् अस्ति।
  • यन्त्राकारयोः मध्ये सुलभतया स्केलिंग् कर्तुं, ब्लॉक्-तत्त्वानि rems कृते margins इत्यस्य उपयोगं कुर्वन्तु ।
  • font-सम्बद्धानां गुणानाम् घोषणाः न्यूनतमरूपेण स्थापयन्तु , inheritयदा सम्भवं तदा उपयुज्य ।

पृष्ठ पूर्वनिर्धारित

the <html>and <body>elements इत्येतत् उत्तमं पृष्ठव्यापीं पूर्वनिर्धारितं प्रदातुं अद्यतनं भवति । अधिकविशेषतः : १.

  • The box-sizingवैश्विकरूपेण प्रत्येकस्मिन् तत्त्वे सेट् भवति—सहितं *::beforeच *::after, to border-box. एतेन तत्त्वस्य घोषितविस्तारः कदापि गद्दीद्वारा सीमायाः वा कारणेन न अतिक्रम्यते इति सुनिश्चितं भवति ।
  • , इत्यत्र कोऽपि आधारः न font-sizeघोषितः <html>, परन्तु 16pxकल्प्यते (ब्राउजर् पूर्वनिर्धारितम्) । उपयोक्तृप्राथमिकतानां सम्मानं कुर्वन् अधिकसुलभदृष्टिकोणं सुनिश्चित्य माध्यमप्रश्नानां माध्यमेन सुलभप्रतिसादात्मकप्रकार-स्केलिंग् कृते font-size: 1remपर प्रयुक्तः अस्ति ।<body>
  • द <body>अपि एकं वैश्विकं font-family, line-height, तथा च सेट् करोति text-align. एतत् पश्चात् केनचित् रूपतत्त्वैः अनुवंशिकं भवति यत् font असङ्गतिं निवारयितुं शक्यते ।
  • सुरक्षार्थं, the <body>has a declared background-color, defaulting to #fff.

देशी फॉन्ट ढेर

पूर्वनिर्धारितं जालपुटं (Helvetica Neue, Helvetica, Arial च) Bootstrap 4 मध्ये पातितम् अस्ति तथा च प्रत्येकस्मिन् उपकरणे तथा OS मध्ये इष्टतमपाठप्रतिपादनार्थं “native font stack” इत्यनेन प्रतिस्थापितम् अस्ति अस्मिन् Smashing Magazine लेखे देशी font stacks विषये अधिकं पठन्तु .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ध्यानं कुर्वन्तु यत् यतः font stack मध्ये emoji fonts समाविष्टाः सन्ति, अनेके सामान्याः symbol/dingbat Unicode वर्णाः बहुवर्णीयचित्रचित्ररूपेण रेण्डर् भविष्यन्ति । तेषां स्वरूपं भिन्नं भविष्यति, ब्राउजर्/प्लेटफॉर्मस्य मूल-इमोजी-फॉन्ट्-मध्ये प्रयुक्तायाः शैलीयाः आधारेण, ते च कस्यापि CSS- colorशैल्याः प्रभावं न प्राप्नुयुः ।

इदं सम्पूर्णे Bootstrap मध्ये वैश्विकरूपेण स्वयमेव अनुवंशिकरूपेण च font-familyप्रयुक्तं भवति । <body>global -इत्येतत् स्विच् कर्तुं , Bootstrap इत्येतत् font-familyअद्यतनं कृत्वा पुनः संकलयन्तु ।$font-family-base

शीर्षक एवं अनुच्छेद

सर्वे शीर्षकतत्त्वानि—उदा., <h1>—तथा <p>तेषां margin-topनिष्कासनार्थं पुनः सेट् भवन्ति । शीर्षकाणि योजिताः सन्ति तथा च सुलभ अन्तरालस्य कृते margin-bottom: .5remअनुच्छेदाः ।margin-bottom: 1rem

शीर्षकम् उदाहरण
<h1></h1> ह1. बूटस्ट्रैप शीर्षक
<h2></h2> ह२. बूटस्ट्रैप शीर्षक
<h3></h3> ह३. बूटस्ट्रैप शीर्षक
<h4></h4> ह४ । बूटस्ट्रैप शीर्षक
<h5></h5> ह५ । बूटस्ट्रैप शीर्षक
<h6></h6> ह६ । बूटस्ट्रैप शीर्षक

सूचीति

सर्वासु सूचीषु— <ul>, <ol>, तथा <dl>—तयोः margin-topनिष्कासितम् अस्ति तथा च a margin-bottom: 1rem. नेस्टेड् सूचीषु न margin-bottom.

  • सर्वासु सूचीषु तेषां शीर्षमार्जिनं निष्कासितम् अस्ति
  • तथा उनके नीचे की सीमा सामान्य हो गई
  • नेस्टेड् सूचीषु अधः मार्जिनं नास्ति
    • एवं तेषां समरूपं अधिकं भवति
    • विशेषतः यदा अधिकानि सूचीवस्तूनि अनुवर्तन्ते
  • वामपैडिंग् अपि पुनः सेट् कृतम् अस्ति
  1. अत्र क्रमबद्धा सूची अस्ति
  2. कतिपयैः सूचीवस्तूनाम् सह
  3. अस्य समग्ररूपं समानम् अस्ति
  4. यथा पूर्वाक्रमितसूची

सरलतरशैल्याः, स्पष्टपदानुक्रमणिकायाः, उत्तमान्तरस्य च कृते, वर्णनसूचीषु margins अद्यतनं कृतम् अस्ति । <dd>s पुनः सेट् margin-leftकृत्वा 0योजयन्तु margin-bottom: .5rem. <dt>s गाढाः भवन्ति .

वर्णन सूची
पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
पद
पदस्य परिभाषा ।
तस्यैव पदस्य द्वितीया परिभाषा ।
अन्यत् पदम्
अस्य अन्यपदस्य परिभाषा ।

पूर्वस्वरूपित पाठ

तत्त्वं तस्य <pre>निष्कासयितुं तस्य कृते एककानां margin-topउपयोगं कर्तुं पुनः सेट् भवति .remmargin-bottom

.उदाहरण-तत्त्व { .
  मार्जिन-तल: 1rem;
} .

सारणीः

सारणीः शैली s मध्ये किञ्चित् समायोजिताः सन्ति , सीमाः संकुचन्ति, सम्पूर्णे <caption>च सुसंगतं सुनिश्चितं कुर्वन्ति । text-alignसीमानां, गद्दी, इत्यादीनां अतिरिक्तपरिवर्तनानि वर्गेण सह आगच्छन्ति.table .

एतत् उदाहरणसारणी अस्ति, एतत् च सामग्रीवर्णनार्थं तस्य शीर्षकम् अस्ति ।
सारणी शीर्षक सारणी शीर्षक सारणी शीर्षक सारणी शीर्षक
सारणी कोष्ठक सारणी कोष्ठक सारणी कोष्ठक सारणी कोष्ठक
सारणी कोष्ठक सारणी कोष्ठक सारणी कोष्ठक सारणी कोष्ठक
सारणी कोष्ठक सारणी कोष्ठक सारणी कोष्ठक सारणी कोष्ठक

रूपाणि

सरलतराधारशैल्याः कृते विविधाः रूपतत्त्वानि पुनः आरभ्यतानि सन्ति । अत्र केचन उल्लेखनीयाः परिवर्तनाः सन्ति ।

  • <fieldset>s इत्यस्य सीमाः, पैडिंग्, मार्जिनः वा नास्ति अतः तेषां उपयोगः व्यक्तिगतनिवेशानां वा निवेशसमूहानां वा कृते आवरणरूपेण सुलभतया कर्तुं शक्यते ।
  • <legend>s, fieldsets इव, अपि पुनः शैलीकृतं यत् प्रकारस्य शीर्षकरूपेण प्रदर्शयितुं शक्यते ।
  • <label>s प्रयोक्तुं display: inline-blockअनुमन्यते इति सेट् भवन्ति ।margin
  • <input>s, <select>s, <textarea>s, <button>s च अधिकतया Normalize द्वारा सम्बोधिताः सन्ति, परन्तु Reboot तेषां निष्कासयति marginतथा च सेट् करोति line-height: inherit, अपि ।
  • <textarea>s केवलं लम्बवत् आकारान्तरणीयाः भवितुं परिवर्तिताः भवन्ति यतः क्षैतिज आकारान्तरणं प्रायः पृष्ठविन्यासं “भङ्गयति” ।
  • <button>s तथा <input>बटन तत्वों के cursor: pointerकब है :not(:disabled).

एते परिवर्तनानि, अधिकानि च अधः प्रदर्शितानि सन्ति ।

उदाहरण आख्यायिका

१००

बटन पर सूचक

role="button"Reboot इत्यत्र पूर्वनिर्धारितं कर्सरं परिवर्तयितुं कृते एकं वर्धनं समाविष्टम् अस्ति pointer। तत्त्वानि अन्तरक्रियाशीलाः इति सूचयितुं साहाय्यं कर्तुं तत्त्वेषु एतत् विशेषतां योजयन्तु । एषा भूमिका तत्त्वानां कृते आवश्यकी नास्ति <button>, ये स्वकीयं cursorपरिवर्तनं प्राप्नुवन्ति।

गैर-बटन तत्व बटन 
<span role="button" tabindex="0">Non-button element button</span>

विविध तत्व

पत्रसङ्केतः

ब्राउजर् पूर्वनिर्धारितं तः to तः <address>पुनः सेट् कर्तुं तत्त्वं अद्यतनं भवति । अपि इदानीं अनुवंशिकः अस्ति, अपि च योजितः अस्ति । s समीपस्थस्य पूर्वजस्य (अथवा कार्यस्य सम्पूर्णस्य निकायस्य) सम्पर्कसूचनाः प्रस्तुत्यर्थं भवन्ति। इत्यनेन रेखाः समाप्तं कृत्वा स्वरूपणं संरक्षितं कुर्वन्तु ।font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ट्विटर, इंक
1355 मार्केट सेंट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890
पूर्ण नाम
[email protected]

Blockquote इति

marginblockquotes इत्यत्र पूर्वनिर्धारितं 1em 40px, अतः 0 0 1remअन्यैः तत्त्वैः सह किमपि अधिकं सुसंगतं किमपि कृते वयं तत् पुनः सेट् कुर्मः ।

एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।

Source Title इत्यस्मिन् कश्चन प्रसिद्धः

इनलाइन तत्व

अनुच्छेदपाठस्य मध्ये <abbr>विशिष्टं कर्तुं तत्त्वं मूलभूतं स्टाइलिंग् प्राप्नोति ।

नुल्ला अत्र विटाए एलिट् लिबेरो, एक फारेत्र औगुए।

संक्षेपः

cursorसारांशस्य पूर्वनिर्धारितं text, अतः वयं तत् to पुनः सेट् कुर्मः यत् pointerतत् क्लिक् कृत्वा तत् तत्त्वेन सह अन्तरक्रिया कर्तुं शक्यते इति बोधयितुं ।

केचन विवरणाः

विवरण के बारे में अधिक जानकारी।

ततोऽपि अधिकविवरणम्

अत्र विवरणविषये अपि अधिकविवरणम् अस्ति ।

HTML5 [hidden]विशेषता

HTML5 नामकं नूतनं वैश्विकविशेषणं[hidden]display: none योजयति , यत् पूर्वनिर्धारितरूपेण शैलीकृतम् अस्ति । PureCSS तः विचारं ऋणं गृहीत्वा , वयं अस्य पूर्वनिर्धारितस्य उपरि सुधारं कुर्मः यत् तस्य आकस्मिकतया अधिलिखितं न भवति [hidden] { display: none !important; }इति निवारयितुं सहायतां करोति । displayयद्यपि [hidden]IE10 द्वारा देशीरूपेण समर्थितं नास्ति तथापि अस्माकं CSS मध्ये स्पष्टघोषणा तां समस्यां परितः गच्छति।

<input type="text" hidden>
jQuery असङ्गतता

[hidden]$(...).hide()jQuery's तथा $(...).show()विधियों के साथ संगत नहीं है। अतः, वयं सम्प्रति विशेषतया [hidden]अन्येषां तकनीकानां उपरि displayतत्त्वानां प्रबन्धनार्थं समर्थनं न कुर्मः।

केवलं तत्त्वस्य दृश्यतां टोग्ल् कर्तुं, अर्थात् तस्य displayपरिवर्तनं न भवति तथा च तत्त्वं अद्यापि दस्तावेजस्य प्रवाहं प्रभावितं कर्तुं शक्नोति, तस्य स्थाने वर्गस्य उपयोगं कुर्वन्तु ।.invisible