整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ootstrap這個前端工具包，可以快速開發(fā)WEB應(yīng)用程序。Bootstrap使用最新版本的瀏覽器技術(shù)，它也是HTML以及CSS的集合，可以為WEB開發(fā)貢獻更加時尚的網(wǎng)格系統(tǒng)、表格、表單、板式。如果身為程序員的你，到現(xiàn)在還沒有開始用Bootstrap模板，那簡直是很落伍。W3Cschool小師妹為大家收集了最值得收藏的Bootstrap資源網(wǎng)站，你千萬不要錯過。
1.模板資源
W3Cschool小師妹為大家收集了Bootstrap模板資源，這些網(wǎng)站很漂亮，還可以下載Bootstrap模板。唯一的缺點，應(yīng)該就是幾乎都是英文版的，閱讀起來不太方便。但是對于程序大牛來說，英語根本不是問題。
2.工具
Bootstrap不僅僅是一個框架，它改變了整個游戲規(guī)則。Bootstrap使得更多應(yīng)用以及網(wǎng)站設(shè)計開發(fā)更賤簡便。Bootstrap工具很多，像可視化制作工具、在線設(shè)計工具等，W3Cschool小師妹為大家收集的這些站點，都可以下載Bootstrap工具，需要的話可以去123點W3Cschool點cn看一下。
3.站點/主題網(wǎng)站
Bootstrap基于jQuery框架而開發(fā)，但是和jQuery框架相比，Bootstrap更加人性化以及個性化。Bootstrap可以兼容絕大多數(shù)的jQuery插件，有自己獨特的網(wǎng)站風(fēng)格。W3Cschool小師妹為大家收集的Bootstrap站點或主題網(wǎng)站很多，都很實用。想要資源的話，可以自行去123點W3Cschool點cn下載。
當前最熱門的前端框架，要屬Bootstrap。它來自于Twitter，具有簡潔、直觀、強悍等特點。Bootstrap把大量HTML框架普及成產(chǎn)品，它的功能相當強大。作為程序員的你，快來收藏這些Bootstrap資源網(wǎng)站吧。
學(xué)編程技術(shù)，就到W3Cschool，如果你喜歡我們的文章，可以點擊右上角關(guān)注我們;如果你想看到更多IT界的資訊，可以加我們的公眾號。
公眾號：w3cschoolcn
著移動端迅速發(fā)展，現(xiàn)在網(wǎng)站建設(shè)一般都要求兼容手機端，所以為了節(jié)約成本，大部分用戶喜歡使用一些響應(yīng)式前端框架，特別流行使用Bootstrap來建站，其良好擴展性加上實用的特效功能，足以應(yīng)付大多數(shù)網(wǎng)站需求。
今天設(shè)計達人網(wǎng)小編為大家整理一系列好看的Bootstrap HTML網(wǎng)站模板，大家可以用它來快速搭建自己的網(wǎng)站，比如企業(yè)站、個人站、美食類或作品展示網(wǎng)站等。
適合個人或工作到作品展示的響應(yīng)式模板
一個單頁模板，透明設(shè)計風(fēng)格，若搭配一個漂亮的全屏背景圖像，一定會很有感覺。
Backyard是一個漂亮著陸頁模板，使用Bootstrap3搭建，擁有5種風(fēng)格和6種配色。
宮格式布局，用來展示作品、照片的個人網(wǎng)站比較適合。
一套扁平化風(fēng)格的APP HTML模板，做移動網(wǎng)頁，可以嘗試直接使用這套模板制作。
woo是一個干凈、時尚的著陸頁模板，全屏屏的設(shè)計，兼容流行的瀏覽器和移動端設(shè)備，適合用于APP、服務(wù)類網(wǎng)站。
單頁模板，首頁使用自適應(yīng)全屏圖像，網(wǎng)站導(dǎo)航默認隱藏起來，達到更簡約的效果。
如果你正在推一本新書，那么這個圖標介紹類模板就很適合你了
現(xiàn)在流行使用微信訂餐，美食餐飲類等餐廳的網(wǎng)站都火起來，都想做一個兼容手機瀏覽的網(wǎng)站，這個模板就非常適合了。
一個歐美簡約風(fēng)格的企業(yè)站模板，響應(yīng)式設(shè)計，兼容手機端瀏覽。
簡約的單頁模板
手機APP宣傳網(wǎng)站模板
適用于旅游類的網(wǎng)站模板
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
你想輕松地創(chuàng)建令人驚嘆且響應(yīng)式的在線應(yīng)用程序嗎？使用BootstrapVue，您可以快速創(chuàng)建美觀且用戶友好的界面。這個開源工具包是基于Vue.js和Bootstrap構(gòu)建的，非常適合開發(fā)現(xiàn)代Web應(yīng)用程序。本文將介紹其基礎(chǔ)知識，讓您可以開始使用這個強大的框架。
BootstrapVue是一個流行的開源前端框架，它結(jié)合了Bootstrap（一個前端UI框架）和vue.js（一個漸進式JavaScript框架），用于創(chuàng)建可重用的UI組件和Web應(yīng)用程序。
它被設(shè)計為高度可定制，允許開發(fā)人員輕松修改組件的外觀和行為，以適應(yīng)其項目的特定需求。它還包括對CSS預(yù)處理器（如Sass和Less）的支持，使得定制組件的樣式變得容易。
第一步是創(chuàng)建一個Vue.js項目。這對于您集成BootstrapVue至關(guān)重要。通過在終端中運行以下命令來創(chuàng)建一個Vue.js項目。
vue create my-project注意：BootstrapVue目前不支持Vue.js 3的穩(wěn)定版本。您需要將其與vue2-3遷移構(gòu)建集成以使其正常工作。然而，由于該方法存在已知限制，不建議這樣做。不過，您可以按照這里的步驟使用vue2-3遷移構(gòu)建來創(chuàng)建一個新的應(yīng)用程序。
https://v3-migration.vuejs.org/migration-build.html
然后使用 cd my-project 導(dǎo)航到您的項目目錄。現(xiàn)在可以繼續(xù)集成 BootstrapVue。有兩種將 BootstrapVue 集成到您的 Vue.js 項目中的方法：
根據(jù)您使用的軟件包管理器運行以下命令之一：
# With npm
npm install bootstrap bootstrap-vue
# With yarn
yarn add bootstrap bootstrap-vue訪問CdnJS網(wǎng)站獲取當前CDN鏈接，然后打開公共文件夾中的 index.html 文件，并添加以下代碼：
<!-- Add Bootstrap and Bootstrap-Vue CSS in the <head> section -->
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.min.css"
/>
<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>以上代碼將把每個包的最小化和最新版本拉入我們的項目中，干凈簡潔！
對于本文，我們將一直使用軟件包管理器。讓我們繼續(xù)設(shè)置已安裝的BootstrapVue軟件包。
為了設(shè)置Bootstrap和BootstrapVue包，我們剛剛安裝了。在src文件夾中，您會找到 main.js 文件。按照下面的方式導(dǎo)入BootstrapVue及其CSS文件：
import Vue from 'vue'
// Import BootstrapVue
import { BootstrapVue } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files ( ensure to follow the order)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)在上面的代碼中，我們使用 Vue.use() 函數(shù)在應(yīng)用程序的入口點注冊了BootstrapVue，以便我們的應(yīng)用程序可以識別它。
如果你曾經(jīng)使用過Bootstrap，你就會知道它使用了一些預(yù)構(gòu)建的組件。BootstrapVue也是如此。BootstrapVue組件是專門為Vue.js構(gòu)建的，使它們更容易使用和集成到你的Vue.js應(yīng)用程序中。
一些受歡迎的BootstrapVue組件包括按鈕、表單、模態(tài)框、工具提示、導(dǎo)航菜單、輪播圖等等。BootstrapVue還包括一些在標準Bootstrap中不可用的獨特組件，例如BTable組件用于創(chuàng)建動態(tài)和交互式表格。
BootstrapVue還包括一系列的實用類和混合類，可以進一步定制組件的外觀和行為。這使得創(chuàng)建高度定制和獨特的網(wǎng)站和應(yīng)用程序成為可能，使其脫穎而出。
讓我們來探索一些基本的BootstrapVue組件，包括按鈕、表單和卡片。
BootstrapVue提供了多種按鈕組件，可用于創(chuàng)建具有不同樣式和功能的不同類型的按鈕。最基本的按鈕組件是 b-button ，可用于創(chuàng)建一個簡單的可點擊按鈕。
這是一個例子：
<template>
<div class="m-5 d-flex justify-content-center">
-<b-button variant="primary">Click me!</b-button>
</div>
</template>;上面的代碼將創(chuàng)建一個帶有文本“點擊我！”的主色按鈕，因為 variant 屬性設(shè)置為 primary 。您可以通過指定其他變體值（例如 danger 或 success ）來更改按鈕的顏色和樣式。
BootstrapVue還提供了其他按鈕組件，可用于創(chuàng)建下拉菜單、切換按鈕等等。您可以通過BootstrapVue文檔了解更多關(guān)于按鈕組件的信息。
https://bootstrap-vue.org/docs/components/button
BootstrapVue提供了各種表單組件，可用于創(chuàng)建具有不同類型的輸入字段、標簽和驗證的表單。最基本的表單組件是 b-form-input ，可用于創(chuàng)建簡單的文本輸入字段。
這是一個例子：
<template>
<div class="m-5">
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="form.checked"
id="checkboxes-4"
:aria-describedby="ariaDescribedby"
>
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: "",
name: "",
food: null,
checked: [],
},
foods: [
{ text: "Select One", value: null },
"Carrots",
"Beans",
"Tomatoes",
"Corn",
],
show: true,
};
},
methods: {
onSubmit(event) {
event.preventDefault();
alert(JSON.stringify(this.form));
},
onReset(event) {
event.preventDefault();
// Reset our form values
this.form.email="";
this.form.name="";
this.form.food=null;
this.form.checked=[];
// Trick to reset/clear native browser form validation state
this.show=false;
this.$nextTick(()=> {
this.show=true;
});
},
},
};
</script>上面的代碼將創(chuàng)建一個簡單的表單，請求用戶的電子郵件、姓名和食品選擇。我們可以根據(jù)需要隨時自定義此表單。
BootstrapVue提供了其他表單組件，可用于創(chuàng)建單選按鈕、復(fù)選框、下拉菜單等。它通過 v-validate 指令、 ValidationProvider 和 ValidationObserver 組件提供表單驗證功能。
BootstrapVue提供了多種卡片組件，可用于樣式化文本、標題和圖像。最基本的卡片組件是 b-card ，可用于顯示圖像、標題和文本。
<template>
<div class="m-5 d-flex justify-content-center">
<b-card
title="Card Title"
img-src="https://images.unsplash.com/photo-1653387137517-fbc54d488ed8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHZ1ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem"
class="mb-2"
>
<b-card-text>
You can add some text in your card to suit your use case
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</template>上面的代碼將使用 b-card 組件創(chuàng)建一個帶有圖像、標題和一些文本的卡片組件。
BootstrapVue提供了其他的卡片組件，可以用來創(chuàng)建標題、段落、列表等等。BootstrapVue還提供了一個用于卡片相關(guān)樣式的實用類系統(tǒng)，您可以應(yīng)用常見的樣式，如文本顏色、字體粗細和文本對齊。
模態(tài)框是在當前頁面上顯示內(nèi)容的一種流行方式。BootstrapVue提供了一個組件，可以用來創(chuàng)建具有各種功能的模態(tài)框，例如顯示/隱藏模態(tài)框、更改其大小和添加自定義內(nèi)容。
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" @click="showModal=true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal">
<p>Hello, world!</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>上面的代碼將創(chuàng)建一個按鈕，當點擊時，將顯示一個帶有標題“我的模態(tài)框”和文本“你好，世界！”的模態(tài)對話框。
BootstrapVue還提供其他與模態(tài)框相關(guān)的組件，可用于創(chuàng)建確認對話框、可滾動的模態(tài)框等。BootstrapVue還提供了在模態(tài)框顯示或隱藏之前和之后觸發(fā)操作的事件。
旋轉(zhuǎn)木馬（幻燈）是一種流行的方式，用于在旋轉(zhuǎn)的旋轉(zhuǎn)木馬中顯示一系列圖像或其他內(nèi)容。BootstrapVue提供了一個組件，可以用于創(chuàng)建具有各種功能的旋轉(zhuǎn)木馬，例如自動播放、導(dǎo)航控制和指示器。
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
class="w-75"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="Our First slide"
text="A beautiful day in the streets"
img-src="https://picsum.photos/1024/480/?image=57"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=62">
<h1>Welcome to BootstrapVue</h1>
</b-carousel-slide>
<!-- Slides with just an image -->
<b-carousel-slide
text="my text"
img-src="https://picsum.photos/1024/480/?image=64"
></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=50"
alt="image slot"
/>
</template>
</b-carousel-slide>
</b-carousel>
</div>
</template>這段代碼將創(chuàng)建一個輪播，其中包含三個幻燈片，每個幻燈片都包含一張圖片和一個標題。BootstrapVue還提供了其他與輪播相關(guān)的組件，可以用于創(chuàng)建幻燈片轉(zhuǎn)換、淡入淡出轉(zhuǎn)換，并提供事件，可以在每個幻燈片顯示之前和之后觸發(fā)操作。
工具提示是一種流行的方式，當用戶懸停在元素上時，可以顯示附加信息。BootstrapVue提供了一個 b-tooltip 組件，可用于創(chuàng)建具有各種功能的工具提示，例如更改位置、添加自定義內(nèi)容以及控制何時顯示工具提示。
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" v-b-tooltip.hover.top="'Hello, world!'"
>Hover me!</b-button
>
</div>
</template>這段代碼將創(chuàng)建一個按鈕，當鼠標懸停在上面時，將顯示一個帶有文本“Hello, world!”的工具提示。
BootstrapVue還提供了其他與工具提示相關(guān)的組件，可以用于創(chuàng)建帶有HTML內(nèi)容的工具提示，以編程方式顯示/隱藏工具提示等。
自定義BootstrapVue組件可以讓您根據(jù)特定需求調(diào)整組件的外觀和行為。現(xiàn)在，讓我們使用示例來學(xué)習(xí)如何自定義兩個BootstrapVue組件：按鈕和模態(tài)框。
BootstrapVue為按鈕提供了許多自定義選項，例如更改大小、顏色和形狀，以及添加自定義類或樣式。
這是一個使用BootstrapVue類來改變按鈕顏色和形狀的示例：
<template>
<div class="m-5">
<b-button variant="primary" class="rounded-pill"
>Primary Pill Button</b-button
>
<b-button variant="danger" class="rounded-0">Danger Square Button</b-button>
</div>
</template>這段代碼將創(chuàng)建兩個按鈕，一個是主要顏色和圓形形狀的按鈕，另一個是危險顏色和方形形狀的按鈕。 rounded-pill 和 rounded-0 類是 BootstrapVue 類，用于控制按鈕的邊框半徑。
您還可以通過使用 class 或 style 屬性向按鈕添加自定義類或樣式
<template>
<div class="m-5 d-flex justify-content-center">
<b-button
variant="success"
class="my-custom-class"
style="font-size: 1.2rem"
>Customized Button</b-button
>
</div>
</template>這段代碼將創(chuàng)建一個帶有自定義類 my-custom-class 和自定義樣式 font-size: 1.2rem; 的成功按鈕。
BootstrapVue為模態(tài)框提供了許多自定義選項，例如更改大小、位置、背景和添加自定義內(nèi)容或樣式。
這是一個使用BootstrapVue屬性更改模態(tài)框大小和位置的示例：
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" @click="showModal=true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal" size="lg" centered>
<p>Hello, world!</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>點擊后，此代碼將創(chuàng)建一個按鈕，該按鈕將顯示一個標題為“我的模態(tài)框”，文本為“你好，世界！”的模態(tài)對話框，具有較大的尺寸和居中位置。
您還可以通過使用插槽或 style 屬性向模態(tài)框添加自定義內(nèi)容或樣式
<template>
<div class="d-flex justify-content-center m-5">
<b-button variant="primary" @click="showModal=true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal">
<template #default>
<h2>Custom Heading</h2>
<p>This is some custom content.</p>
</template>
<template #modal-footer="{ ok }">
<b-button @click="ok()">Custom OK Button</b-button>
</template>
<template #modal-body="{ css }">
<p :style="css">This paragraph has custom CSS.</p>
</template>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>這段代碼將創(chuàng)建一個帶有自定義標題和內(nèi)容、確定按鈕以及帶有自定義 CSS 的段落的模態(tài)對話框。
BootstrapVue提供了強大的樣式功能，可以讓您輕松地使用CSS來為組件添加樣式。在本文中，我們將解釋如何使用CSS來為BootstrapVue組件添加樣式。
BootstrapVue組件具有一組默認樣式，您可以輕松自定義。您可以通過向組件添加 class 或 style 屬性來應(yīng)用樣式：
<template>
<div class="m-5">
<b-button
variant="primary"
class="my-custom-class"
style="background-color: red"
>Custom Button</b-button
>
</div>
</template>在上面的代碼中，我們給按鈕添加了一個自定義的類 my-custom-class 和一個自定義的樣式 background-color: red 。這將把按鈕的背景顏色改為紅色。
BootstrapVue還支持使用Sass和Less等CSS預(yù)處理器。使用預(yù)處理器可以編寫更強大和模塊化的CSS代碼。要在BootstrapVue中使用預(yù)處理器，您只需將預(yù)處理器文件包含在項目中，并將其導(dǎo)入到您的代碼中即可：
/* In your main.scss file */
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-vue/src/index.scss";一旦導(dǎo)入預(yù)處理器文件，您可以使用它們的功能來為組件設(shè)置樣式。例如，在Sass中，您可以使用變量來定義顏色和其他屬性：
$primary-color: #007bff;
.custom-button {
background-color: $primary-color;
border-radius: 0.25rem;
}在這個例子中，我們定義了一個變量來表示主要顏色，并使用它來為一個自定義類的按鈕進行樣式設(shè)置。這將使按鈕具有一個背景顏色為 #007bff （即主要顏色）和一個邊框半徑為 0.25rem 的效果。
有時候你可能想要為一個組件應(yīng)用樣式，但只想讓這些樣式影響該組件，而不影響頁面上的其他組件。這種情況下，你可以使用作用域樣式，這些樣式只會應(yīng)用于特定的組件及其子組件。
在BootstrapVue中使用作用域樣式，您可以在組件的 <style> 標簽中添加 scoped 屬性
<template>
<div class="m-5">
<b-button variant="primary" class="my-custom-class m-2"
>Custom Button</b-button
>
<b-button variant="primary">Custom Button</b-button>
<b-button variant="primary">Custom Button</b-button>
</div>
</template>
<style scoped>
.my-custom-class {
background-color: red;
}
</style>
在這個例子中，我們給 <style> 標簽添加了 scoped 屬性，并為 my-custom-class 類定義了樣式。這個樣式只會應(yīng)用于這個組件中的按鈕，而不會應(yīng)用于頁面上的其他按鈕。
在本文中，我們介紹了BootstrapVue的基礎(chǔ)知識，包括安裝和設(shè)置、配置和使用。我們探討了一些關(guān)鍵組件，如按鈕、模態(tài)框、工具提示等。
BootstrapVue是一個強大的工具，可以幫助開發(fā)人員快速、輕松地創(chuàng)建漂亮、響應(yīng)式的Web應(yīng)用程序。無論您是構(gòu)建一個簡單的網(wǎng)站還是一個復(fù)雜的Web應(yīng)用程序，它都可以幫助您入門，并使構(gòu)建用戶界面變得更加容易。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
