company logo
advertisement for deep fried Twinkies


Foundation学习



<div class="row">  <div class="column align-self-bottom">Align bottomdiv>  <div class="column align-self-middle">Align middlediv>  <div class="column align-self-top">e dignissimos nobis div>

div>

360截图20160701173011683.jpg

使用JS必须$(document).foundation();

关于显示或隐藏:在这一页里:http://foundation.zurb.com/sites/docs/visibility.html 介绍关于在不同大小屏幕上显示或隐藏某些内容

.show是显示

<p>怎么都显示p>

<p class="show-for-medium">中等的显示p>

<p class="show-for-large">大屏上才显示p>

下面的几个是在超大屏上才显示

<p class="show-for-small-only">You are <em>definitelyem> on a small screen.p>

<p class="show-for-medium-only">You are <em>definitelyem> on a medium screen.p>

<p class="show-for-large-only">You are <em>definitelyem> on a large screen.p>

.hide是隐藏  意思和上面的正相反

<p class="hide-for-medium">You are <em>notem> on a medium screen or larger.p>

<p class="hide-for-large">You are <em>notem> on a large screen or larger.p>


关于浮动:http://foundation.zurb.com/sites/docs/float-classes.html

<div class="callout clearfix">  <a class="button float-left">Lefta>  <a class="button float-right">Righta>

div>

上面这两个按钮一个在左一个在右

<img src="assets/img/generic/voyager.jpg" class="float-center">

还可以这样的居中,但它解释的意思是只有绝对大小不能是百分比或自动适应大小的才能这样

关于字体排版方面:http://foundation.zurb.com/sites/docs/typography-base.html

http://foundation.zurb.com/sites/docs/typography-helpers.html

里面有很多排版字体格式方面的

关于按钮方面http://foundation.zurb.com/sites/docs/button.html

都是按钮,两种,表单的用type="submit"

<a href="about.html" class="button">Learn Morea>

<a href="#features" class="button">View All Featuresa>

<button type="button" class="success button">Savebutton>

<button type="button" class="alert button">Deletebutton>


大小的控制

<a class="tiny button" href="#">So Tinya> 小的

<a class="small button" href="#">So Smalla>中等

<a class="button" href="#">So Basica>正常

<a class="large button" href="#">So Largea>大个的

<a class="expanded button" href="#">Such Expanda>很长很高

<a class="small expanded button" href="#">Wow, Small Expanda>很长很窄

各种颜色

Secondary Color

Success Color

Alert Color

Warning Color

Disabled Button

空心形的各种颜色


带下拉的按钮 dropdown

还可以设置在什么屏幕上显示,

 

  Close

 

   大屏幕上才显示,这里显示的是图标X



在下面还有按钮组等等,可以自己看


下面是关于滑块的控制http://foundation.zurb.com/sites/docs/slider.html


关于Switch单开关按钮的:http://foundation.zurb.com/sites/docs/switch.html

<div class="switch">  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">  <label class="switch-paddle" for="exampleSwitch">    <span class="show-for-sr">Download Kittensspan>  label>div>



 

 

    Download Kittens

 


还可以组合用

<div class="switch">  <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">  <label class="switch-paddle" for="exampleRadioSwitch1">    <span class="show-for-sr">Bulbasaurspan>  label>div>


 

 

    Bulbasaur

 


还可以控制大小

<div class="switch tiny">  <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">  <label class="switch-paddle" for="tinySwitch">    <span class="show-for-sr">Tiny Sandwiches Enabledspan>  label>div><div class="switch small">  <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">  <label class="switch-paddle" for="smallSwitch">    <span class="show-for-sr">Small Portions Onlyspan>  label>div> <div class="switch large">  <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">  <label class="switch-paddle" for="largeSwitch">    <span class="show-for-sr">Show Large Elephantsspan>  label>div>


 

 

    Tiny Sandwiches Enabled

 




 

 

    Small Portions Only

 

 



 

 

    Show Large Elephants

 


还能带字了

<p>Do you like me?p><div class="switch large">  <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">  <label class="switch-paddle" for="yes-no">    <span class="show-for-sr">Do you like me?span>    <span class="switch-active" aria-hidden="true">Yesspan>    <span class="switch-inactive" aria-hidden="true">Nospan>  label>div>



Do you like me?


 

 

    Do you like me?