less學(xué)習(xí)之Bootstrap

widuu 發(fā)布于2019-08-30 15:55 / 3562人閱讀

摘要：學(xué)習(xí)筆記之目錄說明源代碼里面的目錄是這樣的只給出部分文件顧名思義，為整個定義的全局變量。定義在中使用的灰色和品牌顏色。這部分定義的主要色成功失敗警告等等。之后也定義了默認(rèn)背景色。

less學(xué)習(xí)筆記之bootstrap 目錄說明

源代碼里面的目錄是這樣的(只給出部分)：

 .csscomb.json
│  .csslintrc
│  alerts.less
│  badges.less
│  bootstrap.less
│  breadcrumbs.less
│  button-groups.less
│  buttons.less
│  carousel.less
│  close.less
│  ...
│
└─mixins
    alerts.less
    background-variant.less
    border-radius.less
    buttons.less
    center-block.less
    clearfix.less
    forms.less
    gradients.less
    ...

文件 variables.less

顧名思義，為整個Bootstrap定義的全局變量。

知識點一：
Less的作用域和css很相似，變量和混合（mixins）在當(dāng)前文件無法找到時會繼承父級作用，如果任然沒有找到則會編譯拋出異常。

定義在Bootstrap中使用的灰色和品牌顏色。

@gray-base:  #000;
@gray-darker:lighten(@gray-base, 13.5%);
@gray-dark:  lighten(@gray-base, 20%); 
@gray:   lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); 
@gray-lighter:   lighten(@gray-base, 93.5%); 

// 這部分定義的主要色：成功、失敗、警告等等。
@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

具體體現(xiàn)：

知識點2：函數(shù) lighten與darken
描述： 參數(shù)：`color, amount, method`
功能： `color + amount` 表示在`color`的基礎(chǔ)上，
變得更淡或者更深,加上method后表示在`color * method` 的基礎(chǔ)上，變淡/深 amount，
這里先不解釋less中色值是怎么計算的。

之后也定義了默認(rèn)背景色。

定義字體風(fēng)格

字體大小定義

Bootstrap的基礎(chǔ)字體為14px。

知識點3：函數(shù)ceil和floor
簡單說明：分別為向上取整和向下取整

輸入框風(fēng)格定義

cursor：not-allowed //當(dāng)button與input處于disabled時，鼠標(biāo)指針的樣式

優(yōu)先級定義

設(shè)置一些默認(rèn)層級優(yōu)先級z-index，用于特定的組件，例如：navbar、dropdown、popover、modal-background、tooltip、navbar-fixed。值都為1000+，這也就是有時候我們自己自定義了一些優(yōu)先級，但是還是達(dá)不到效果，可以想一想是不是值不夠？

less的坑

在實際的運用less中，遇到的問題。
1、就是使用calc(100% - 50px)，發(fā)現(xiàn)有時候通過調(diào)試看到不是像自己寫的一樣，這時候需要使用~進(jìn)行處理如： calc(~"100% - 50px")(一定要用雙引號)。

2、在頁面調(diào)試的時候，有時候?qū)︻伾黾油该鞫然蛘咂洳僮?，得到的色值不?六位，而是#八位，對于#八位，在編譯后不一定能夠正確展示在頁面，這個時候就需要使用less的函數(shù)fade。fade(#, n%).

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)之substr() 深度學(xué)習(xí)之概要 webrtc學(xué)習(xí)之九 linux學(xué)習(xí)之centos

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117242.html

發(fā)表評論

登陸后可評論

0條評論

widuu

男|高級講師

我要關(guān)注我要私信

TA的文章

MBR60100PT-ASEMI肖特基二極管，MBR60100PT適配變頻器

閱讀 3651·2021-11-24 09:39
【浙政釘】微信-專有釘釘小程序-開發(fā)踩坑實記

閱讀 2594·2021-11-15 11:37
力扣1812，LCP17，2011，1876，520，709，1704，1844，1805題解

閱讀 2235·2021-11-11 16:55
Python自動繪制UML圖、函數(shù)調(diào)用圖（Call Graph）

閱讀 5417·2021-10-14 09:43
GitHub 推出 2 款色盲模式主題

閱讀 3743·2021-10-08 10:05
CMIVPS：VPS主機年付7折月付8折,香港大帶寬/直連線路

閱讀 3044·2021-09-13 10:26
面向?qū)ο?方法

閱讀 2349·2021-09-08 09:35
less學(xué)習(xí)之Bootstrap

閱讀 3563·2019-08-30 15:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！