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>
使用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>很长很窄
各种颜色
空心形的各种颜色
带下拉的按钮 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?