Bootstrap 5 ఆరంభం

కోర్సు సిఫారసులు:

  • Bootstrap ఏమిటి?
  • Bootstrap హైలైట్ లో హెచ్చరికలు, ఫార్మ్స్, బటన్స్, టేబుల్స్, నేవిగేషన్, మోడల్స్, ఇమేజ్ స్లైడర్స్ మొదలైన హెచ్చరికలు అందిస్తుంది
  • Bootstrap పెద్దగా జావాస్క్రిప్ట్ ప్లగ్ఇన్స్ అందిస్తుంది
  • Bootstrap మీకు రేసపన్సివ్ డిజైన్ సృష్టించడానికి సులభం చేస్తుంది

రేసపన్సివ్ వెబ్ డిజైన్ ఏమిటి?

రేసపన్సివ్ వెబ్ డిజైన్ అనేది ప్రతి పరికరంపై మారుతున్న వెబ్సైట్ను సృష్టించడానికి ఉద్దేశించబడింది, కాబట్టి చిన్న మొబైల్లు మరియు పెద్ద కంప్యూటర్లపై ఉపయోగదారు అనుభవాన్ని బలోపేతం చేస్తుంది.

Bootstrap 5 ఉదాహరణ

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>నా మొదటి Bootstrap పేజీ</h1>
</div>


  

    

      
列 1：春日

      
胜日寻芳泗水滨，无边光景一时新。

      
等闲识得东风面，万紫千红总是春。

    </div>
    

      
列 2：初夏绝句

      
纷纷红紫已成尘，布谷声中夏令新。

      
夹路桑麻行不尽，始知身是太平人。

    </div>
    

      <div class="col-sm-4">
      <h3>కాలం 3: మంచు ప‌ర్వ‌తం</h3>
      <p>చిన్న కొండపై రాతి కొండ ముళ్ళు మార్గం చిన్నది, ప్ర‌మాణిక వీధి ఉన్న స్థానంలో ఉంది.</p>
    </div>
  </div>
</div>

స్వయంగా ప్రయత్నించండి

<p>పార్కింగ్ కోసం స‌ర‌క్కార్ ప్ర‌జ‌లు మెరుగుప‌డిన వాస్త‌వం మొద‌లు చేసింది, ఆగ‌స్టు నెల వాస్త‌వం పెద్ద పెద్ద పుష్పాలు కంటే ఎక్కువ ఉన్నాయి.</p>

Bootstrap వ‌ర్ష‌న్‌లు

Bootstrap 5 (2021 లో విడుద‌ల‌య్యింది) Bootstrap యొక్క నూత‌న‌మైన వ‌ర్ష‌న్ (2013 లో విడుద‌ల‌య్యింది); కొత్త కార్య‌క‌ర‌ణాలు, వేగ‌వంత‌మైన సైట్ స్టైల్స్, వేగ‌వంత‌మైన రిస్పాంసివ్ ప్ర‌యోగించ‌వ‌చ్చు

Bootstrap 5 మ‌రియు Bootstrap 3 & 4 యొక్క ప్ర‌ధాన వ్య‌త్యాసం బ్రౌజ‌ర్లు మరియు ప్లాట్‌ఫారమ్స్ యొక్క సంక‌ర్షించ‌బ‌డిన నెక్స్ట్ స్టేబిల్ వ‌ర్ష‌న్లను మ‌ద్ద‌తు చేస్తుంది. కానీ ఇంట‌ర్నెట్ ఎక్స్‌ప్లోర‌ర్ 11 మ‌రియు దాని కంటే త‌క్కువ వ‌ర్ష‌న్ల‌ను మ‌ద్ద‌తు చేయ‌లేదు.

క‌మ్మెంట్‌లు:బ్రౌజ‌ర్లు మ‌రియు Bootstrap 4 యొక్క కీల‌క అప్రెషన్స్ మ‌రియు డాక్యుమెంటేష‌న్ మార్పులను మ‌ద్ద‌తు చేస్తున్నారు, వాటిని ఉప‌యోగించ‌డం పూర్తిగా సుర‌క్షితం. కానీ వాటిలో కొత్త ల‌క్ష‌ణాలు జోడించ‌బ‌డ‌లేదు.

ఎందుకు Bootstrap ని ఉప‌యోగించ‌ాలి?

Bootstrap యొక్క ప్ర‌యోజ‌నాలు:

  • ఉప‌యోగించ‌డం సుల‌భం:హైల్లింగ్ మరియు CSS లో మొత్తం ప్రాథ‌మిక జ్ఞానం ఉన్న‌వారు ఎలాంటి బ్రౌజ‌ర్లో బ్రౌజ‌ర్లో ఉప‌యోగించవ‌చ్చు
  • రిస్పాంసివ్ ల‌క్ష‌ణాలు:Bootstrap యొక్క రిస్పాంసివ్ సైట్ స్టైల్స్ మొబైల్స్, టాబ్లెట్లు మ‌రియు డెస్క్టాప్లు కోసం స‌ర్దుబాటు చేయ‌వ‌చ్చు
  • మొబైల్ ప్రాధాన్యం ప‌ద్ధ‌తి:Bootstrap లో, మొబైల్ ప్రాధాన్యం విష‌యంలో సైట్ స్టైల్స్ స్ట్ర‌క్చ‌ర్ లో ఒక భాగంగా ఉంది
  • బ్రౌజ‌ర్ సంక‌ర్షించ‌బ‌డింది:Bootstrap 5 అన్ని ఆధునిక బ్రౌజ‌ర్ల‌తో సంక‌ర్షించ‌బ‌డింది (Chrome, Firefox, Edge, Safari మ‌రియు Opera).

చూపుదారిని చూడండి:IE11 మ‌రియు దాని క‌న్నా త‌క్కువ వ‌ర్ష‌న్లను మ‌ద్ద‌తు చేయాలి అని ఉంటే, BS4 లేదా BS3 ని ఉప‌యోగించ‌వ‌ల‌సి ఉంటుంది。

Bootstrap 5 ని ఎక్కడ పొంద‌గ‌ల‌సింది అని చెప్పండి?

Bootstrap 5 ని మీ స్వంత వెబ్‌సైట్‌లో ఉప‌యోగించ‌డానికి రెండు ప‌ద్ధ‌తులు ఉన్నాయి。

మీరు చేయవచ్చు:

  • 包含来自 CDN 的 Bootstrap 5
  • 从 getbootstrap.com 下载 Bootstrap 5

Bootstrap 5 CDN

如果不想自己下载并托管 Bootstrap 5，则可以从 CDN（内容交付网络）中引用它。

CodeW3C.com 为 Bootstrap 的 CSS 和 JavaScript 提供了 CDN 支持：

MaxCDN:


<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">

<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

使用 Bootstrap 5 CDN 的优势之一：

许多用户在访问另一个站点时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 将确保一旦用户从中请求文件，它将从最接近他们的服务器提供服务，这也导致更快的加载时间。

JavaScript？

Bootstrap 5 将 JavaScript 用于不同的组件（如模态、工具提示、弹出框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，那就不需要它们。

下载 Bootstrap 5

如果您想自己下载并托管 Bootstrap 5，请访问 https://getbootstrap.com/，然后按照那里的说明进行操作。

使用 Bootstrap 5 创建您的第一张网页

1. 添加 HTML5 文档类型

Bootstrap 5 使用的是需要 HTML5 doctype 的 HTML 元素和 CSS 属性。

请始终在页面开头包含 HTML5 doctype，以及 lang 属性和正确的标题、字符集：

<!DOCTYPE html>
<html lang="en">
  <head>
    Bootstrap 5 实例
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 移动优先

Bootstrap 5 的设计目标是响应移动设备。移动优先的样式是核心框架的一部分。

为确保正确的渲染和触摸缩放，请在 <head> ఎలిమెంట్లో క్రింది విషయాలను జోడించండి <meta> టాగ్గుని పేరు:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width పేజీ వెడల్పును పరికరం యొక్క screen-width తో అనుగుణంగా సెట్ చేసింది.

initial-scale=1 బ్రౌజర్ మొదటిసారి పేజీని లోడ్ చేసినప్పుడు ప్రారంభ జాక్స్ స్కేల్ ని సెట్ చేసింది.

3. కంటెయినర్

Bootstrap 5 అనేది సైట్ కంటెంట్ మీద వేపటి కిందలో ప్యాకేజీ కంపోనెంట్స్ అవసరం ఉంది.

రెండు కంటైనర్ క్లాసులు ఎంచుకోవచ్చు:

  1. .container క్లాస్ ఒక స్పందనాత్మక నిర్ధిష్ట వెడల్పు కంటైనర్ను అందిస్తుంది
  2. .container-fluid క్లాస్ ఒక సర్వర్స్ కంటైనర్ను అందిస్తుంది, అన్ని వీక్షణ వెడల్పు విస్తరణ

రెండు బేసిక్ Bootstrap 5 పేజీలు

container ఉదాహరణ

ఈ ఉదాహరణలు బేసిక్ Bootstrap 5 పేజీని (స్పందనాత్మక నిర్ధిష్ట వెడల్పు కంటైనర్లతో) సూచిస్తాయి:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap ప్రతిమానికి</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>నా మొదటి Bootstrap పేజీ</h1>
  <p>ఈ భాగం .container క్లాస్ లో ఉంది.</p>
  <p>.container క్లాస్ స్పందనాత్మక నిర్ధిష్ట వెడల్పు కంటైనర్లను అందిస్తుంది.</p>
</div>
</body>
</html>

స్వయంగా ప్రయత్నించండి

Container Fluid ఉదాహరణ

ఈ ఉదాహరణలు బేసిక్ Bootstrap 5 పేజీని (సర్వర్స్ కంటైనర్లతో) సూచిస్తాయి:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap ప్రతిమానికి</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>నా మొదటి Bootstrap పేజీ</h1>
  <p>ఈ భాగం .container-fluid క్లాస్ లో ఉంది.</p>
  <p>.container-fluid క్లాస్ సర్వర్స్ కంటైనర్లను అందిస్తుంది, అన్ని వీక్షణ వెడల్పు విస్తరణ.</p>
</div>
</body>
</html>

స్వయంగా ప్రయత్నించండి