Bootstrap 和 Vue.js 都是現代前端開發中非常常用的工具。Bootstrap 是一個支持響應式設計的前端開發框架，提供了一系列的樣式和組件，能夠快速構建美觀的頁面效果。而 Vue.js 是一個流行的前端 JavaScript 框架，它采用了組件化的開發思路，讓開發者可以更加方便地搭建復雜的單頁面應用。

Bootstrap 的布局系統非常強大，可以通過給不同的元素進行添加 class 實現響應式布局。例如，我們可以通過以下代碼實現一個常見的三欄布局：

<div class="container">
<div class="row">
<div class="col-md-4">
<p>左欄內容</p>
</div>
<div class="col-md-4">
<p>中間內容</p>
</div>
<div class="col-md-4">
<p>右欄內容</p>
</div>
</div>
</div>

這段代碼會讓頁面以三欄布局呈現，其中左右兩側的欄目占據屏幕的 1/3，中間欄目占據屏幕的 1/3。而 Vue.js 則更加注重組件化思想，讓代碼可以更干凈、更有邏輯性。以下是一個基本的 Vue.js 組件：

Vue.component('my-component', {
template: '<div><p>Hello, World!</p></div>'
});

上面的代碼會定義一個名為 my-component 的組件，它只有一個簡單的模板，輸出一個“Hello, World!”的文字。在 Vue.js 中，我們可以在模板中使用插值表達式、v-if 指令等特性來實現更豐富的表現效果。例如：

<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World!'
}
})
</script>

這段代碼會在頁面上輸出“Hello, World!”的文字，而這個文字的內容則由 Vue 實例中的 data 字段控制。當 data 中的字段發生變化時，頁面上的文字也會隨之更新。