457 lines
24 KiB
HTML
457 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="">
|
||
<meta name="author" content="">
|
||
<title>Leanote</title>
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
|
||
<link href="css/bootstrap.css" rel="stylesheet">
|
||
<!-- 先加载, 没有样式, 宽度不定 -->
|
||
<link rel="stylesheet" href="tinymce/skins/custom/skin.min.css"type="text/css">
|
||
<!-- leanote css -->
|
||
<link rel="stylesheet" href="css/style.css"type="text/css">
|
||
<link href="css/se7en-font.css" rel="stylesheet">
|
||
<link href="css/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet">
|
||
|
||
<script>
|
||
function log(o) {
|
||
console.log(o);
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div id="page">
|
||
<div id="pageInner">
|
||
|
||
<!-- 头部 -->
|
||
<!-- <div id="headerContainer"> -->
|
||
<div id="header">
|
||
|
||
<!-- <div id="headerLeft" class="pull-left">
|
||
asdfsd
|
||
</div>
|
||
|
||
-->
|
||
<div id="logo" class="pull-left">
|
||
Leanote
|
||
<!-- <img class="is_img" src="images/invis.gif" alt="leanote"> -->
|
||
</div>
|
||
|
||
<!-- search -->
|
||
<div class="pull-left">
|
||
<form class="navbar-form form-inline col-lg-2 hidden-xs" id="searchNote">
|
||
<input class="form-control" placeholder="Search" type="text">
|
||
</form>
|
||
</div>
|
||
|
||
<!-- avatar -->
|
||
<div class="pull-right" style="margin: 0 10px">
|
||
<div class="dropdown">
|
||
<a class="dropdown-toggle" data-toggle="dropdown" style="line-height: 60px;">
|
||
<img src="images/avatar.png" style="height: 40px; border: 1px solid #ccc"/>
|
||
life
|
||
<i class="fa fa-angle-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li role="presentation">
|
||
<i class="fa fa-info"></i>
|
||
<a role="menuitem" tabindex="-1" href="#">
|
||
个人信息</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<i class="fa fa-cog"></i>
|
||
<a role="menuitem" tabindex="-1" href="#">
|
||
设置</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<ul id="setting" class="pull-right">
|
||
<li class="dropdown messages">
|
||
<a class="dropdown-toggle" data-toggle="dropdown">
|
||
<span aria-hidden="true" class="icon se7en-flag"></span>
|
||
<div class="sr-only">
|
||
Messages
|
||
</div>
|
||
<p class="counter">
|
||
3
|
||
</p>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">
|
||
Could we meet today? I wanted...</a>
|
||
</li>
|
||
<li><a href="#">
|
||
Important data needs your analysis...</a>
|
||
</li>
|
||
<li><a href="#">
|
||
Buy Se7en today, it's a great theme...</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown settings">
|
||
<a class="dropdown-toggle" data-toggle="dropdown">
|
||
<span aria-hidden="true" class="icon se7en-gear"></span>
|
||
<div class="sr-only">
|
||
Settings
|
||
</div>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li>
|
||
<a class="settings-link blue"><span></span>Blue</a>
|
||
</li>
|
||
<li>
|
||
<a class="settings-link green"><span></span>Green</a>
|
||
</li>
|
||
<li>
|
||
<a class="settings-link orange"><span></span>Orange</a>
|
||
</li>
|
||
<li>
|
||
<a class="settings-link magenta"><span></span>Magenta</a>
|
||
</li>
|
||
<li>
|
||
<a class="settings-link gray"><span></span>Gray</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<div style="clear: both"></div>
|
||
</div>
|
||
<!-- </div> -->
|
||
|
||
<div id="mainContainer" class="clearfix">
|
||
<div id="notebook">
|
||
<div class="folderNote opened">
|
||
<div class="folderHeader">
|
||
<a >
|
||
<h1>
|
||
<i class="fa fa-angle-down"></i>
|
||
My Notes
|
||
</h1>
|
||
</a>
|
||
</div>
|
||
<ul class="folderBody">
|
||
<li><a class="active">Hadoop</a></li>
|
||
<li><a>August 13, 2013</a></li>
|
||
<li><a>Node webkit</a></li>
|
||
<li><a>Hadoop</a></li>
|
||
<li><a>Node webkit</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="folderNote opened" id="myTag">
|
||
<div class="folderHeader">
|
||
<a>
|
||
<h1>
|
||
<i class="fa fa-angle-down"></i>
|
||
My Tags</h1>
|
||
</a>
|
||
</div>
|
||
|
||
<ul class="folderBody">
|
||
<li>
|
||
<a>
|
||
<span class="label label-red">红色</span>
|
||
<span class="badge">42</span>
|
||
</a>
|
||
</li>
|
||
<li><a>
|
||
<span class="label label-blue">蓝色</span> <span class="badge">32</span></a>
|
||
</li>
|
||
<li><a>
|
||
<span class="label label-yellow">黄色</span> <span class="badge">15</span>
|
||
</a></li>
|
||
<li><a>
|
||
<span class="label label-green">绿色</span> <span class="badge">90</span>
|
||
</a></li>
|
||
<li><a>
|
||
<span class="label label-default">life</span> <span class="badge">189</span>
|
||
</a></li>
|
||
<li><a>
|
||
<span class="label label-default">node-webkit</span> <span class="badge">189</span>
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="folderNote closed">
|
||
<div class="folderHeader">
|
||
<a>
|
||
<h1>
|
||
<i class="fa fa-angle-right"></i>
|
||
Life's</h1>
|
||
</a>
|
||
</div>
|
||
<ul class="folderBody">
|
||
<li><a>Hadoop</a></li>
|
||
<li><a>Node webkit</a></li>
|
||
<li><a>Hadoop</a></li>
|
||
<li><a>Node webkit</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="folderNote closed">
|
||
<div class="folderHeader">
|
||
<a>
|
||
<h1>
|
||
<i class="fa fa-angle-right"></i>
|
||
Life's</h1>
|
||
</a>
|
||
</div>
|
||
<ul class="folderBody" style="display: none">
|
||
<li><a>Hadoop</a></li>
|
||
<li><a>Node webkit</a></li>
|
||
<li><a>Hadoop</a></li>
|
||
<li><a>Node webkit</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="left:200px" class="noteSplit" id="notebookSplitter"></div>
|
||
|
||
<div id="noteList">
|
||
<div class="clearfix" id="notesAndSort">
|
||
|
||
<div class="pull-left">
|
||
|
||
<div class="dropdown">
|
||
<a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Hadoop
|
||
<i class="fa fa-angle-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="left: 5px;">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hadoop</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Node Webkit</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="sortType">
|
||
<div class="dropdown">
|
||
<a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
|
||
<i class="fa fa-sort-alpha-asc"></i>
|
||
Sort
|
||
<i class="fa fa-angle-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="right: 3px; !important; left:-100px;min-width: 100px;">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">创建日期</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">修改日期</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">标题</a></li>
|
||
<li role="presentation" class="divider"></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated </a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 笔记缩略 -->
|
||
<div id="noteItemList">
|
||
|
||
|
||
<div href="#" class="item">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
<div href="#" class="item item-active">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
<div href="#" class="item">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div href="#" class="item">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div href="#" class="item">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
<div href="#" class="item">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
<div href="#" class="item">
|
||
<div class="item-thumb" style="">
|
||
<img src="images/a.gif"/>
|
||
</div>
|
||
|
||
<div class="item-desc" style="">
|
||
<p class="item-title">修改linux系统的时间CST与EDT</p>
|
||
<p class="item-text">初始时间：2012年 09月 14日 星期五 18:15:33 EDT[root@test ~]# mv /etc/localtime /etc/localtime.bak[root@test ~]# ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime[root@test ~]# date修改后的时间：</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div style="left:500px" class="noteSplit" id="noteSplitter"></div>
|
||
|
||
<div id="note">
|
||
<!-- 遮罩, 为了resize3Columns用 -->
|
||
<div id="noteMask" style="position: absolute; top: 0px; bottom: 0px; right: 0; left: 10px; z-index: -1"></div>
|
||
<div id="noteTop">
|
||
<!-- 左侧放tag, 右侧放按钮, 比如save, info, move, delete -->
|
||
<div id="tool" class="clearfix">
|
||
<!-- tag可以参考 mac的文件tag, 预定义一些颜色, 用户也可以自己输入-->
|
||
<div class="pull-left" id="tag">
|
||
<div id="tags" style="display: inline-block; line-height: 25px;">
|
||
|
||
</div>
|
||
|
||
<div class="dropdown" style="display: inline-block" id="tagDropdown">
|
||
<i class="fa fa-bookmark-o"></i>
|
||
<a class="metro-a dropdown-toggle" data-toggle="dropdown" id="addTagTrigger" style="cursor: text; padding-left:0">
|
||
click to add tags
|
||
</a>
|
||
<input type="text" id="addTagInput"/>
|
||
<ul class="dropdown-menu" role="menu" id="tagColor">
|
||
<li role="presentation">
|
||
<span class="label label-red">红色</span>
|
||
</li>
|
||
<li role="presentation">
|
||
<span class="label label-blue">蓝色</span>
|
||
</li>
|
||
<li role="presentation"><span class="label label-yellow">黄色</span></li>
|
||
<li role="presentation"><span class="label label-green">绿色</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<ul class="pull-right" id="editorTool">
|
||
<li>
|
||
<a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
|
||
信息
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<div class="dropdown">
|
||
<a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
|
||
移至
|
||
<i class="fa fa-angle-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="right: 3px; !important; left:-100px;min-width: 100px;">
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hadoop</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Javascript</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Html5</a></li>
|
||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">My Life</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="ios7-a " id="leanoteNavTrigger" data-toggle="dropdown">
|
||
文档导航
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="noteTitleDiv"><input name="noteTitle" id="noteTitle" value="Bootstrap css"></div>
|
||
|
||
<!-- 编辑器 -->
|
||
<div id="mceToolbar" style="">
|
||
|
||
<div id="popularToolbar" style="position: absolute; right: 30px; left: 0"></div>
|
||
|
||
<a style="dispaly: block; position: absolute; cursor: pointer; right: 10px; padding: 3px 10px" id="moreBtn">
|
||
<i class="fa fa-angle-down"></i>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="editor">
|
||
<div id="leanoteNav">
|
||
</div>
|
||
<!-- 由此可以算高度 -->
|
||
<textarea id="content" name="content">
|
||
|
||
<h1 id="overview">概览</h1></div><p class="lead">深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。</p><h3 id="overview-doctype">HTML5文档类型</h3><p>Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p><div class="highlight"><pre><code class="language-html xml"><span class="doctype"><!DOCTYPE html></span>
|
||
<span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"zh-CN"</span>></span>
|
||
...
|
||
<span class="tag"></<span class="title">html</span>></span></code></pre></div><h3 id="overview-mobile">移动设备优先</h3><p>在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。</p><p>为了确保适当的绘制和触屏缩放，需要在<code><head></code>之中<strong>添加viewport元数据标签</strong>。</p><div class="highlight"><pre><code class="language-html xml"><span class="tag"><<span class="title">meta</span> <span class="attribute">name</span>=<span class="value">"viewport"</span> <span class="attribute">content</span>=<span class="value">"width=device-width, initial-scale=1.0"</span>></span></code></pre></div><p>在移动设备浏览器上，通过为viewport meta标签添加<code>user-scalable=no</code>可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！</p><div class="highlight"><pre><code class="language-html xml"><span class="tag"><<span class="title">meta</span> <span class="attribute">name</span>=<span class="value">"viewport"</span> <span class="attribute">content</span>=<span class="value">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span>></span></code></pre></div><h3 id="overview-responsive-images">响应式图片</h3><p>通过添加<code>.img-responsive</code> class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了<code>max-width: 100%;</code> 和<code>height: auto;</code>属性，可以让图片按比例缩放，不超过其父元素的尺寸。</p><div class="highlight"><pre><code class="language-html xml"><span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"..."</span> <span class="attribute">class</span>=<span class="value">"img-responsive"</span> <span class="attribute">alt</span>=<span class="value">"Responsive image"</span>></span></code></pre></div><h3 id="overview-type-links">排版和链接</h3><p>Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：</p><ul><li>为<code>body</code>标签设置了<code>background-color: #fff;</code>样式</li><li>设置了排版的基本属性<code>@font-family-base</code>、<code>@font-size-base</code>和<code>@line-height-base</code></li><li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li></ul><p>这些样式可以在<code>scaffolding.less</code>文件中找到。</p><h3 id="overview-normalize">Normalize</h3><p>为了增强跨浏览器表现的一致性，我们使用了<a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>，这是由<a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a>和 <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>维护的一个reset库。</p><h3 id="overview-container">Containers</h3><p>用<code>.container</code>包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了<code>max-width</code>，用以匹配栅格系统。</p><div class="highlight"><pre><code class="language-html xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span>
|
||
...
|
||
<span class="tag"></<span class="title">div</span>></span></code></pre></div></div><div class="bs-docs-section"><div class="page-header"><h1 id="grid">栅格系统</h1></div><p class="lead">Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的<a href="http://v3.bootcss.com/css/#grid-example-basic">预定义classe</a>，还有强大的<a href="http://v3.bootcss.com/css/#grid-less">mixin用于生成更具语义的布局</a>。</p><h3 id="grid-intro">简介</h3><p>栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：</p><ul><li>“行（row）”必须包含在<code>.container</code>中，以便为其赋予合适的排列（aligment）和内补（padding）。</li><li>使用“行（row）”在水平方向创建一组“列（column）”。</li><li>你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。</li><li>类似Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。</li><li>通过设置<code>padding</code>从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的<code>margin</code>从而抵消掉padding的影响。</li><li>栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个<code>.col-xs-4</code>来创建。</li></ul><p>通过研究案例，可以将这些原理应用到你的代码中。</p><div class="bs-callout bs-callout-info"><h4>栅格与全宽布局Grids and full-width layouts</h4><p>对于需要占据整个浏览器视口（viewport）的页面，需要将内容区域包裹在一个容器元素内，并且赋予<code>padding: 0 15px;</code>，为的是抵消掉为<code>.row</code>所设置的<code>margin: 0 -15px;</code>（如果不这样的话，你的页面会左右超出视口15px，页面底部出现横向滚动条）。</p></div><h3 id="grid-media-queries">媒体查询</h3><p>在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。</p><div class="highlight"><pre><code class="language-css"><span class="comment">/* Extra small devices (phones, less than 768px) */</span>
|
||
<span class="comment">/* No media query since this is the default in Bootstrap */</span>
|
||
|
||
<span class="comment">/* Small devices (tablets, 768px and up) */</span>
|
||
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-sm-min) </span>{ ... }
|
||
|
||
<span class="comment">/* Medium devices (desktops, 992px and up) */</span>
|
||
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-md-min) </span>{ ... }
|
||
|
||
<span class="comment">/* Large devices (large desktops, 1200px and up) */</span>
|
||
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-lg-min) </span>{ ... }</code></pre></div><p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p><div class="highlight"><pre><code class="language-css"><span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (max-width: @screen-xs-max) </span>{ ... }
|
||
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-sm-min) and (max-width: @screen-sm-max) </span>{ ... }
|
||
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-md-min) and (max-width: @screen-md-max) </span>{ ... }
|
||
<span class="at_rule">@<span class="keyword"><span class="keyword">media</span></span> (min-width: @screen-lg-min) </span>{ ... }</code></pre></div>
|
||
|
||
</textarea>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/jquery-1.9.0.min.js"></script>
|
||
<script src="js/bootstrap.js"></script>
|
||
<script type="text/javascript" src="tinymce/tinymce.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|