不透過Less更改Bootstrap3漢堡選單的breakpoint

這樣比較快XD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

—-參考文獻—-
[1] Change bootstrap navbar collapse breakpoint without using LESS – http://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less

如何帥氣的使用Sublime Text 3

st3
這是我目前的開發環境XD

其實我剛開始進入前端領域時是相當不習慣的,第一次做網頁是用Dreamweaver,直接用編輯器寫網頁對我來說真的很困難,但是經過了四個月的時間,現在打開Dreamweaver反而不會用了。好吧,今天我來分享一下幾個讓自己寫程式時看起來比較帥的好東西。

1. Package Control

相關網址:https://packagecontrol.io/

為了讓Sublime Text可以用快速的方法裝上外掛,一定要把Package Control裝起來
(2016-09-25更新:從Sublime Text 3124開始,安裝後會有一鍵安裝Package Control的功能)

如果需要手動安裝,請參考安裝說明:
https://packagecontrol.io/installation

2. HTML-CSS-JS Prettify

相關網址:https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify

這東西很好用,有時拿到別人亂糟糟的code或是自己不小心寫code沒在排版的,超方便的一鍵排版外掛就是這個拉!不管是html、css、js檔都可以幫你排的票漂亮亮喔!在安裝這個外掛前,電腦裡要先裝好Node.js,然後就直接用Package Control尋找外掛:

  • 在Sublime Text裡鍵入 Ctrl+Shift+P 或 Cmd+Shift+P 叫出Package Control
  • 輸入 install, 選擇 Package Control: Install Package
  • 輸入 prettify, 選擇 HTML-CSS-JS Prettify

3. Color Highlighter

相關網址:https://packagecontrol.io/packages/Color%20Highlighter

這個外掛可以直接在編輯器裡顯示出色碼對應的顏色,算是輔助型工具,我會搭配Sip來用。

4. 佈景主題相關

Material Theme

相關網址:https://packagecontrol.io/packages/Material%20Theme

這個是我今年使用的佈景主題,因為Seti UI壞掉惹所以才換,但是在Search模式時按鈕會怪怪的,只要下方區塊有彈出其他功能,按鈕有時會出現bug。

Theme – Brogrammer

相關網址:https://packagecontrol.io/packages/Theme%20-%20Brogrammer

這個是根據下載量推薦才裝的,感覺還可以,我裝只是以防Material的按鈕bug

Seti_UI

相關網址:https://packagecontrol.io/packages/Seti_UI

其實預設的Sublime Text佈景主題就還蠻耐看的了,但是這次介紹的Seti_UI可是連檔案圖示都很精美喔!
(2016-09-25更新:已經沒在用這主題了,但還是先留著)

  • 在Sublime Text裡鍵入 Ctrl+Shift+P 或 Cmd+Shift+P 叫出Package Control
  • 輸入 install, 選擇 Package Control: Install Package
  • 輸入 seti, 選擇 Seti_UI

安裝完成之後記得在個人設定那邊導入這個佈景主題:

選單 Preferences -> Settings – User

{
  "theme": "Seti.sublime-theme",
}

其實他還有一些layout設定可以調整,就自己去官網找範例囉!