當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

从零开始Bootstrap3

發布時間：2024/8/24 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了从零开始Bootstrap3 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

從開發人員的角色編寫 bootstrap3 的基礎教程，初學者可以按此教程一步一步操作一遍，就可以掌握bootstrap3的基礎用法。

一、框架搭建

1.1 引入文件

1.2 布局容器

1.3 柵格系統

1.4 關于顏色

二、常用樣式

2.1 文本操作

2.2 表格操作

2.3 按鈕

三、常用組件

3.1 字體圖標

3.2 下拉菜單

3.3 按鈕組

3.4 標簽頁

3.5 警告框

3.6 模態窗口

3.7 工具提示條

四、 Hello World

一、框架搭建：

1.1 引入文件

使用Bootstrap前需要先引入對應的CSS文件和JS文件

1.2 布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。提供了兩個作此用處的類(.container 和 .container-fluid)。注意，由于 padding等屬性的原因，這兩種容器類不能互相嵌套。

.container 類用于固定寬度并支持響應式布局的容器。

...

</div>

.container-fluid 類用于 100% 寬度，占據全部視口（viewport）的容器。

...

</div>

1.3 柵格系統

1.3.1 柵格系統介紹

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。

1.3.2 col類的區別

下表展示了.col-xs、.col-sm、.col-md、.col-lg區別

1.3.3 代碼示例

示例1：

<div class="row">?

<div class="col-md-8">.col-md-8</div>?

</div>

代碼實現效果如下圖(把一行2比1分隔出來):

示例2：

</div>

代碼實現效果如下圖(代碼實現了寬度>=992px的時候三等分一行，寬度<992px時候二等分一行【說明：bootstrap多余的列將另起一行排列】)：

1.4 關于顏色

Bootstrap內置了多種顏色類：

.success .warning .danger .info

二、常用樣式：

2.1 文本操作

2.1.1 標題操作

HTML 中的所有標題標簽，<h1> 到 <h6> 均可使用。在標題內還可以包含 <small> 標簽或賦予 .small 類的元素，可以用來標記副標題。

代碼示例：

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

?代碼實現效果如下圖：?

2.1.2 段落突出顯示

通過添加 .lead 類可以讓段落突出顯示。代碼示例：

...

</p>

實現效果：

2.1.3 刪除文本(給文本加刪除線)

對于被刪除的文本使用 <del> 標簽，對于沒用的文本使用 <s> 標簽。(實現的效果都是添加刪除線)代碼示例：

<del>

This line of text is meant to be treated as deleted text.

</del>

實現效果：?

2.1.4 插入文本(給文本加下劃線)

額外插入的文本使用 <ins> 標簽，為文本添加下劃線，使用 <u> 標簽。(實現的效果都是添加下劃線)代碼示例：

<ins>

This line of text is meant to be treated as an addition to the document.

</ins>

實現效果：?

2.1.5 文本的對齊

通過文本對齊類，可以簡單方便的將文字重新對齊。代碼示例：

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

?實現效果：?

2.1.6 改變文本的大小寫

通過這幾個類可以改變文本的大小寫。代碼示例：

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

實現效果：?

2.1.7 縮略語

當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對 HTML 的 <abbr> 元素的增強樣式。縮略語元素帶有 title 屬性，外觀表現為帶有較淺的虛線框，鼠標移至上面時會變成帶有“問號”的指針。如想看完整的內容可把鼠標懸停在縮略語上（對使用輔助技術的用戶也可見）, 但需要包含 title 屬性。代碼示例：

實現效果：?

2.2 表格操作

2.2.1 表格的樣式

為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式代碼示例：

...

</table>

實現效果：?Bootstrap還提供了多種表格樣式，以下列舉幾個常用的類：.table-striped??? 條紋狀表格.table-bordered? 帶邊框表格.table-hover????? 鼠標懸停響應效果表格

2.2.2 響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小于768px）水平滾動。當屏幕大于 768px 寬度時，水平滾動條消失。代碼示例：

...

</table>

</div>

實現效果：?

2.3 按鈕

2.3.1 普通按鈕

為 <a>、<button> 或 <input> 元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式。

代碼示例：

<button class="btn btn-default" type="submit">Button</button>

實現效果：

2.3.2 給按鈕著色

使用Bootstrap內置的顏色類給按鈕添加顏色，以下列舉兩種顏色。代碼示例:

<button type="button" class="btn btn-primary">（首選項）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

實現效果：?三、常用組件：

3.1 字體圖標

BootStrap提供了250多個字體圖標，以下列舉幾個：

示例代碼：

實現效果：

3.2 下拉菜單

將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 里，就能實現下拉菜單效果

示例代碼：

Dropdown <span class="caret"></span>

</button>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

</ul>

</div>

實現效果：

3.3 按鈕組

通過按鈕組容器把一組按鈕放在同一行里。代碼示例：

<button type="button" class="btn btn-default">Middle</button>

<button type="button" class="btn btn-default">Right</button>

</div>

實現效果：

3.4 標簽頁

使用Bootstrap的標簽頁樣式。注意 .nav-tabs 類依賴 .nav 基類。

代碼示例：

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

</ul>

?實現效果：??

3.5 警告框

警告框組件通過提供一些靈活的預定義消息，為常見的用戶動作提供反饋消息。

代碼示例：

...

</div>

實現效果：

3.6 模態窗口

模態框包含了模態框的頭、體和一組放置于底部的按鈕。

代碼示例：

<h4 class="modal-title">Modal title</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

實現效果：

3.7 工具提示條

注釋等詳細信息顯示時可考慮使用

代碼示例：

Tooltip on top

</button>

實現效果：

四、Hello World：

4.1 引用BootStrap基礎文件

<!DOCTYPE html>

<head>

<title>Hello Bootstrap</title>

</head>

<body>

<h1>hello Bootstrap<h1>

</body>

</html>

?實現效果（成功引用了BootStrap的基礎文件）：

4.2 填充我的Hello World

<!DOCTYPE html>

<head>

<title>Hello Bootstrap</title>

body {

background-color: #CCC;

}

.titleWord{

color: white;

}

</style>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

</div>

</div>

<button type="submit" class="btn btn-success">開門的都是好芝麻</button>

</form>

</div>

</div>

</nav>

<h2>初識??? BootStrap!</h2>

<p class="blog-post-meta">2015-04-02 by <a href="#">WangFeng</a></p>

<p>Bootstrap，來自 Twitter，基于 HTML、CSS、JAVASCRIPT，簡潔靈活，使得 Web 開發更加快捷。</p>

</div>

</div>

</body>

$('#unAgree').click(function(event) {

$('#modelContent').html('不得不同意');

});

$('#readMore').click(function(event) {

$('#modelContent').html('一目千行，全文已在你心中！');

});

</script>

</html>

?實現效果：

轉載于:https://www.cnblogs.com/wengshurong/p/4432473.html

總結

以上是生活随笔為你收集整理的从零开始Bootstrap3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

从零开始

上一篇： Java开发WebService（使用J
下一篇： Scrum学习