bootstrap3 全域性控制總結

2021-09-02 04:05:59 字數 1155 閱讀 3014

在自己需要寫乙個**的時候,發現就需要一些常用的基礎樣式,對全域性起到作用的,不然對每個空間去做設定,會很麻煩。

自己想了一下,我們一般是使用bootstrap樣式 就能控制全域性,適配mobile和pc端的樣式,而基本上不用去管全域性的樣式,因此從bootstrap原始碼中摘錄了一些控制全域性的樣式,可以應用到我們自己的系統中,在此做了學習筆記

html

body

/*所有控制項全部採用 border-box 怪異模型*/

**:before,

*:after

html

/*定義全域性字型庫、字型大小、行間距、顏色、背景色*/

body

/*對a標籤的全域性控制*/

aa:hover,

a:focus

a:focus

/*顯示是自適應,即寬度100%,高度等比例縮放*/

.img-responsive,

.thumbnail > img,

.thumbnail a > img,

.carousel-inner > .item > img,

.carousel-inner > .item > a > img

/*影象使用圓形邊框*/

.img-circle

/*設定文字對其方式*/

.text-left

.text-right

.text-center

.text-justify

/*不換行*/

.text-nowrap

/*文字大小寫、首字母大寫的設定*/

.text-lowercase

.text-uppercase

.text-capitalize

/*互動控制項需要使用 pointer 滑鼠,告訴使用者是熱點*/

button,

html input[type="button"], // 1

input[type="reset"],

input[type="submit"]

以後我們的前端工程也需要參考 bootstrap 樣式,對html控制項的全域性控制,然後基於這個大前提做樣式修改

bootstrap3自定義popover顯示的內容

1 popover.js的內容一般都是寫元素裡面。如下。點我彈出 隱藏彈出框 其中title為顯示的標題,data content為顯示的內容 2 popover不會自己初始化,所以在頁面中需要用js進行初始化 function 3 可以通過js呼叫,自定義popover彈出的內容。document...

bootstrap 3 三欄簡介布局

三欄布局 1 柵格系統布局 乙個典型的柵格系統布局 col md 4 col md 4 col md 4 效果如下 a 行 row 必須包含在.container 固定寬度 或.container fluid 100 寬度 中 b 使用.col md 柵格類,就可以建立乙個基本的柵格系統,在手機和平...

Bootstrap3模態框Modal垂直居中樣式

1,bootstrap 模態框外掛程式bootbox垂直居中樣式 模態框居中樣式 bootbox container bootbox container empty modal modal dialog 模態框居中樣式 style script function 使用bootbox bootbox....