當前位置：首頁 > news >正文

自己做網(wǎng)站的優(yōu)勢自己開網(wǎng)站怎么開

news 2025/7/8 6:39:51

自己做網(wǎng)站的優(yōu)勢,自己開網(wǎng)站怎么開,個人簡歷word模板,億聯(lián)時代網(wǎng)站建設?? 歡迎大家來到景天科技苑?? 🎈🎈 養(yǎng)成好習慣，先贊后看哦~🎈🎈 所屬的專欄：前端泛海景天的主頁：景天科技苑文章目錄 Bootstrap1.Bootstrap介紹2.簡單使用3.布局容器4.Bootstrap實現(xiàn)輪播…

在這里插入圖片描述

?? 歡迎大家來到景天科技苑??

🎈🎈 養(yǎng)成好習慣，先贊后看哦~🎈🎈

所屬的專欄：前端泛海
景天的主頁：景天科技苑

文章目錄

Bootstrap
- 1.Bootstrap介紹
- 2.簡單使用
- 3.布局容器
- 4.Bootstrap實現(xiàn)輪播圖

Bootstrap

Bootstrap官網(wǎng)

1.Bootstrap介紹

一、什么是Bootstrap？
bootstrap是一個基于HTML、CSS和Javascript語言編寫的框架，具有簡單、靈活的特性，擁有樣式庫、組件和插件，bootstrap常用來開發(fā)響應式布局和移動設備優(yōu)先的Web項目，能夠幫助開發(fā)者快速搭建前端頁面。
Bootstrap誕生于2011年，來自Twitter公司，是目前最受歡迎的前端框架
是一個用于快速開發(fā)Web應用程序和網(wǎng)站的前端框架
Bootstrap是基于HTML、CSS、JS的，簡潔靈活，使得Web開發(fā)更加快捷
概述：Bootstrap是一個建立一個頁面，就可以在三個終端(PC端、平板、手機)上完美展示的響應式前端框架
二、為什么要用Bootstrap
因為Bootstrap是一個簡潔、直觀、強悍的前端開發(fā)框架，讓web開發(fā)更迅速、更容易上手。
封裝了常用的css樣式，js動態(tài)效果。直接調(diào)用
使用bootstrap的宗旨就是 ctrl c / ctrl v
三、如何使用Bootstrap
1.下載Bootstrap庫 https://v4.bootcss.com/(Bootstrap管網(wǎng))

2.頁面中引入庫
jquery-3.3.1.js：jQuery庫【注意：必須在Bootstrap核心庫引入之前引入jQuery庫】

bootstrap.css：Bootstrap核心樣式【添加到head標簽中】
在這里插入圖片描述

使用最新版
在這里插入圖片描述

下載
在這里插入圖片描述

在這里插入圖片描述

并且提供CDN加速在線引入
在這里插入圖片描述

解壓后包含兩個文件夾
在這里插入圖片描述

不管是css，還是js，帶min的都是壓縮過的。生產(chǎn)中使用壓縮過的
在這里插入圖片描述

解壓后，在項目中引入
在這里插入圖片描述

2.簡單使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">適配IE瀏覽器的edge瀏覽器<meta http-equiv="X-UA-Compatible" content="IE=edge">適配手機端，自適應手機屏幕大小，調(diào)整分辨率，方便手機觀看 <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bootstrap簡單使用</title><script src="jquery.js"></script><!--    引入外部bootstrap樣式--><link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" />
</head>

沒做手機屏幕適配之前，很小看不清
在這里插入圖片描述

做了手機屏幕適配后，等比例縮放，但是這樣縮放可能會導致頁面顯示不完內(nèi)容。因此這就需要做響應式
在這里插入圖片描述

我們不用設置任何樣式，只需引入bootstrap自帶的css樣式即可

在這里插入圖片描述

<body><table class="table table-hover table-striped"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>孫堅</td><td>男</td><td>18</td></tr><tr><td>王濤</td><td>男</td><td>20</td></tr><tr><td>王舒展</td><td>女</td><td>20</td></tr><tr><td>劉亦菲</td><td>女</td><td>24</td></tr></tbody></table>
</body>

瀏覽器顯示效果
在這里插入圖片描述

</html>

3.布局容器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><meta name="viewport" content="width=device-width, initial-scale=1"><style>.c1{background-color:tan;height:100px;}.c2{background-color:pink;height:100px;}.c3{background-color:green;height:100px;}</style>
</head>
<body>
<!-- container-fluid占滿整個屏幕 -->

在這里插入圖片描述

<!-- container 左右兩邊有留白 -->

在這里插入圖片描述

<div class="container-fluid"><div class="row">
<!--        //  col-md-offset-3  柵格偏移,向右偏移3個柵格的意思-->
<!--        //  col-md-6 占6個柵格,默認從左邊開始--><div class="col-md-6 c1 col-md-offset-3"><div class="row"><div class="col-md-6 c3"></div></div></div>
<!--        <div class="col-md-8 c2"></div>--></div></div>
<!--<div class="container c1"></div>-->

柵格單位，鋪滿是12個柵格，各占6個
在這里插入圖片描述

如果是占不滿，留空白
在這里插入圖片描述

如果兩個加起來超過12個，則第二個換行
在這里插入圖片描述

新版的柵格偏移，默認從左邊開始，設置了柵格偏移可以從指定柵格開始
在這里插入圖片描述

具體使用方法，可以參照官網(wǎng)使用說明，很詳細
在這里插入圖片描述

縮小屏幕等分，不會換行
在這里插入圖片描述

</body>
<script src="jquery.js"></script>
</html>

4.Bootstrap實現(xiàn)輪播圖

輪播圖必須引入在bootstrap.js之前引入jQuery.js
設置輪播圖輪換圖片間隔時間，默認是5秒
在這里插入圖片描述

還可以通過js方法控制輪播時間
在這里插入圖片描述

輪播圖完整代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>輪播圖</title><script src="jquery.js"></script><link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" /><script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script></head><body><divid="carouselExampleCaptions"class="carousel slide"data-ride="carousel"><ol class="carousel-indicators"><lidata-target="#carouselExampleCaptions"data-slide-to="0"class="active"></li><li data-target="#carouselExampleCaptions" data-slide-to="1"></li><li data-target="#carouselExampleCaptions" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="1.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Some representative placeholder content for the first slide.</p></div></div><div class="carousel-item"><img src="2.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Some representative placeholder content for the second slide.</p></div></div><div class="carousel-item"><img src="3.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Some representative placeholder content for the third slide.</p></div></div></div><buttonclass="carousel-control-prev"type="button"data-target="#carouselExampleCaptions"data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><buttonclass="carousel-control-next"type="button"data-target="#carouselExampleCaptions"data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></body><script>$(".carousel").carousel({interval: 2000,});</script>
</html>