Bootstrap4 Installation and Usage

We can install Bootstrap4 in the following two ways:

• Use Bootstrap 4 CDN.

• From the official websitegetbootstrap.comDownload Bootstrap 4.

  

Bootstrap 4 CDN

Domestic users are recommended to use ByteDance's static resource public library:

Domestic users are recommended to use the libraries on Staticfile CDN:

Note:popper.min.js is used for popups, tooltips, and dropdown menus. Currently, bootstrap.bundle.min.js already includes it.popper.min.js。

In addition, you can also use the following CDN services:

• Domestic recommendation 1:https://cdn.bytedance.com/
• Domestic recommendation 2:https://www.staticfile.net/
• International recommendation:https://cdnjs.com/

Download Bootstrap 4

You can go to the official websitehttps://getbootstrap.com/to download the Bootstrap4 resource library.

Note:In addition, you can also install it using package management tools such as npm, gem, composer, etc.:

npm install bootstrap@4.0.0-beta.2
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

---

Create Your First Bootstrap 4 Page

1. Add the HTML5 doctype

Bootstrap requires the use of an HTML5 document type, so you need to add the HTML5 doctype declaration.

The HTML5 doctype is declared at the head of the document, and the corresponding encoding is set:

Mobile First

To make websites developed with Bootstrap mobile-friendly, ensuring proper rendering and touch zooming, you need to add a viewport meta tag in the head of the webpage, as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-widthIndicates that the width is the width of the device screen.

initial-scale=1Indicates the initial zoom scale.

shrink-to-fit=no automatically adapts to the width of the phone screen.

---

Container Classes

Bootstrap 4 requires a container element to wrap the content of the website.

We can use the following two container classes:

• The .container class is used for a fixed-width container that supports responsive layouts.
• The .container-fluid class is used for a 100% width container that occupies the entire viewport.

---

Two Bootstrap 4 Pages

The following example shows a container that occupies the entire viewport.

<div style="display:none;"> <hr><h2 id="cs-bs4">Using Bootstrap in Cloud Studio</h2> <p>Below we will show you how to install and use Bootstrap4 in Cloud Studio:</p> <ul><li><p>step1: Visit <a target="_blank" href='https://studio.dev.tencent.com/' rel="noopener noreferrer">Tencent Cloud Developer Platform</a> and register/log in to your account.</p></li> <li><p>step2: In the runtime environment menu on the right, select: <code>&quot;ubuntu&quot;</code></p> <p><img src='https://dn-coding-net-production-pp.qbox.me/1a84909d-c924-4699-9dcb-25339dec2780.jpg' alt='' /></p></li><li><p>step3: In the code directory on the left, create an html directory and write your HTML code, such as index.html</p></li><li><p>step4: Paste the following code into the index.html file to import Bootstrap4 (you can also download the Bootstrap4 resource library from the official website <a target="_blank" href='https://getbootstrap.com/' rel="noopener noreferrer">https://getbootstrap.com/</a>):</p> <pre>&lt;!-- New Bootstrap4 cores心 CSS File --&gt; &lt;link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.1.0/css/bootstrap.min.css"&gt; &lt;!-- jQueryFile.affairmustInbootstrap.min.js before引入 --&gt; &lt;script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- popper.min.js used for弹窗、Hint、dropdown menu --&gt; &lt;script src="https://cdn.staticfile.net/popper.js/1.12.5/umd/popper.min.js"&gt;&lt;/script&gt; &lt;!-- 最New Bootstrap4 cores心 JavaScript File --&gt; &lt;script src="https://cdn.staticfile.net/twitter-bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt; </pre> </li> <li><p>step5: Enter the command <code>sudo vim /etc/nginx/sites-enabled/default</code> in the terminal. Modify the red boxed part of the configuration file as shown in the figure below, then enter the command: <code>sudo nginx restart</code> to restart the nginx service (after nginx is installed and started, it listens on port 80 by default. We need to change the nginx site directory and listening port to what we need).</p> <p><img src='https://dn-coding-net-production-pp.qbox.me/bbd3e2ba-1bde-4ef9-9756-961e8fed59fd.jpg' alt='' /></p></li><li><p>step6: Click the [Access Link] tab on the far right. In the access link panel, enter port number: 8080 (consistent with the port number in the nginx configuration file just now), click Create Link, and then you can click the generated link to access the code we just wrote and view the effect of Bootstrap4 components.</p> <p><img src='https://dn-coding-net-production-pp.qbox.me/28f1aac8-8fe9-475d-8ff7-8279dab5469e.jpg' alt='' /></p> <p><img src='https://dn-coding-net-production-pp.qbox.me/b36bdb42-6b8e-4ee7-86a8-3bd3df7d17f4.jpg' alt='' /></li></p></ul> <p>CODING is currently holding a [My Favorite Cloud Studio Plugin Contest] based on Cloud Studio workspaces. Visit the official event website: <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/index" rel="noopener noreferrer" target="_blank">https://studio.qcloud.coding.net/campaign/favorite-plugins/index</a> to learn more about the event.</p> </div> Other Extensions