> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_basic/css-advance/shi_yong_bootstrap.md). # 使用Bootstrap ## 使用Bootstrap 1.開啟一個新的資料夾，裡面建立css資料夾，以及外面建立index.html 2.到bootstrap官網下載，之後加css資料夾內的bootstrap.css放入你的css資料夾內 index.html ``` Document ``` 或直接放入 ``` Bootstrap Template

``` ### 開始使用 1.everything inside container，所有的元素都必須放在這裡面 2.用class定義元素樣式 3.加起來等於12 4.Glyphicons ```

``` 將下面放入container內 ``` ``` ```

我是範例

This is just an example

``` ## 佈局 ``` .col-xs- 小於768px .col-sm- 768~992 .col-md- 992~1200 .col-lg- 大於1200 ``` 後面的數字加起來最大12，超過會跑到第二列如果一個螢幕大小為1200px而div中具有xs和sm則sm會蓋過xs的效果 ```

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

``` 使用offset讓元素往右 ```

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5

.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

``` 等於 ```

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5

.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

``` ### 使用pull和push的absolute移動 push往左，pull往右 ```

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

``` ### 文字對齊 ```

靠左對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。

置中對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。

靠右對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。

平均對齊文字平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。。

不換行文字平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。平均對齊文字。。

``` ### blockquote 比原生html多了左邊的直線 ```

人之初

今天買蘋果

``` 表單 ``` ``` ## 導覽列 ``` ``` 使用圖案，到 ``` ``` 實際範例加入導覽列 ``` ``` 加入中間部分 ```

DESIGN

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even believable.

BOOTSTRAP

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even believable.

SUPPORT

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even believable.

``` 2\. ```

LATEST WORKS

``` 3\. ```

WE CREATE FIRST CLASS DESIGN

By being true to the brand we represent, we elevate the audiences’ relationship to it. Like becomes love becomes a passion. Passion becomes advocacy. And we see the brand blossom from within, creating a whole story the audience embraces. That’s when the brand can truly flex its muscles.

``` 4\. ```

We believe ideas come from everyone, everywhere. At BlackTie, everyone within our agency walls is a designer in their own right. And there are a few principles we believe—and we believe everyone should believe—about our design craft. These truths drive us, motivate us, and ultimately help us redefine the power of design.

``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://easonwang.gitbook.io/web_basic/css-advance/shi_yong_bootstrap.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.