撸代码

12等分:Bootstrap的栅格布局

2019-03-09 11:19:25 作者:码工0组
Bootstrap是Twitter推出的前端开发框架,适用于开发响应式布局、移动设备优先的 WEB 项目。

可以对常用前端开发工具bootstrap、jquery等使用CDN,提升访问速度。
例子:
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
这里,integrity 属性,用来验证文件完整性的;crossorigin 属性,允许本地获取到跨域脚本的错误信息。


Bootstrap 的所有 JavaScript 插件都依赖 jQuery。
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
 


Bootstrap的开发成本极低,核心是栅格布局。
例子:
<div class="row"><!--表示另起一行-->
    <div class="col-md-8 col-xs-6 col-lg-4" ></div>
</div>

解释:
BootStrap将屏幕分为12等分。该DIV在中等屏幕中占有‘8/12’,在手机中占有‘6/12’,在大屏幕中占有屏幕比例的‘4/12’。
.col-xs- 超小屏幕 手机 (<768px)
.col-sm-* 小屏幕 平板 (≥768px)
.col-md-* 中等屏幕 桌面显示器 (≥992px)
.col-lg-* 大屏幕 大桌面显示器 (≥1200px)


Bootstrap的部分常用属性:
placeholder属性:提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
required属性:在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中会弹出提示文字。
autofocus属性:当页面打开时,该控件自动获得光标焦点。

12等分:Bootstrap的栅格布局(图1)