Materialize CSS

8900 ワード
https://materializecss.com/

問題:

  • because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  • 参考解答リンク:https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular/49269425#49269425
  • indexを変更する必要はありません.html、公式サイトに従って下のコードを追加すると上の間違い
    • を報告します.
  • angularを修正するだけです.json "styles": [ "src/styles.css", "node_modules/materialize-css/dist/css/materialize.min.css"],

    • 0.まとめ：Class


    1. set background color

  • class: card-panel
  • 使用方法:
  • class="card-panel teal lighten-2"
  • class="card-panel dark"

    • 2. set text color

  • class: colorName-text
  • 使用方法:apply a text color,just append -text to the color class
  • class="teal-text text-lighten-2"
  • class="dark-text text-darken-2"

    • 3. set the body content's width

  • class: container set the body content's width to the window width of ~xxx% .s 90% .m 85% .l 70% .xl 70%
  • 使用方法:
    ASD

    • 4. align your content

  • vertical align 1.1 class:valign-wrapper 1.2使用方法:div class="valign-wrapper">
  • horizon text align 2.1 class:left-align right-align center-align 2.2使用方法:
    • 

    This should be right aligned

    5. quickly float things


    which is used to avoid specificity issues
  • class: left , right
  • 使用方法:div class="left"> div class="right">

    • 6. navbar


    6.1 navbar整列の設定
  • class: class="brand-logo center"ロゴ中央 navbar links中央
  • 使用方法:
    •

    6.2 Active Items
  • クラスactiveからliタグに追加する現在のページ
    • を示す.
  • class: class="active"
  • 使用方法:
    • JavaScript

    6.3 Extended Navbar with Tabs
    navbarへの拡張コンポーネントの追加を実現するには、クラスnav-extendedから外層のnav tagを追加する必要がある.
  • class: nav-extended
  • 使用方法:
    •

    6.4 Fixed Navbar
  • To make the navbar fixed , you have to add an outer wrapping div with the class navbar-fixed .
  • This will offset your other content while making your nav fixed.
  • You can adjust the height of this outer div to change how much offset is on your content.
  • class: navbar-fixed
  • 使用方法:
    •

    6.5 Navbarプルダウンメニュー
  • To add a navbar dropdown menu, add the ul dropdown structure into the page.
  • Add an element to trigger the dropdown menu
  • Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.
  • class: navbar-fixed
  • 使用方法:
    • ---

\*****      \*****

---

## 1. Color
> 1. background color:    ``` class="card-panel teal lighten-2"```
> 2. text color:  ```class="blue-text text-darken-2"```

    //Background Color This is a card panel with a teal lighten-2 class //Text color ,To apply a text color, just append ' -text ' to the color class like this This is a card panel with dark blue text 
    ## 2. Grid   
> - standard 12 column fluid responsive grid system.
> 1.   grid     
> 2. container          70% ，       。
The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
> 3.  grid       ：
         ，  grid        12  
> 4.    column         row   ，     class       ```col ```      div         column。
> 5.  ```offset-s6```       6 
> 6. ```div class="col s7 push-s5"``` , ```class="col s5 pull-s7``` push    ，pull    
> 7.  ```class="section"``` used for simple top and bottom padding
> 8. ```class="divider"``` are 1 pixel lines that help break up your content.(     )
> 9. 

  





### 1.    columns contained inside a  row

    this div is 6-columns wide on all screen sizes 
    ### 2.   push and pull

    This div is 7-columns wide on pushed to the right by 5-columns. 5-columns wide pulled to the left by 7-columns. 
    
### 3.   offset

    6-columns 6-columns 
    ### 4.   section and divider

    section1


    stuff 
    ### 5.  Promotion Table
3      div，     div     4-columns

    Promo Content 1 goes heres Promo Content 2 goes heres Promo Content 3 goes heres 
    ### 6.  Side Navigation Layout

    Grey navigation panel Teal page content 
    ### 7.  create responsive layouts
How to layout elements using our grid system. Show you how to design you layouts so that they look great on all screen sizes.
**Screen Sizes**
| | Mobile Devices | Tablet Devices | Desktop Devices  | Large Desktop Devices |
:-: | :-: | :-: | :-: | :-: |
|screen sizes|<= 600px |<= 600px | > 992px | > 1200px | 
class prefix | .s | .m | .l  | .xl 
container width| 90% | 85% | 70% | 70%
number of columns| 12 | 12 | 12 |12|
where s signifies the screen class-prefix (s = small, m = medium, l = large) 
#### 7.1 adding responsiveness
-

    I am always full-width (col s12) I am full-width on mobile (col s12 m6) 
              
#### 7.2 Responsive Side Navigation Layout


    

    

  
     
    

  
    

  
     
    

  
    


    

    



L
    ブラウザがファイルをバイナリストリームで読み込む
    jsとcssはポップアップレイヤがページ全体を上書きする方法を実現する