Bootstrap 框架
一,Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局,并且在V3版本之后坚持移动设备优先。 1,优点在Bootstrap出现之前: 命名:重复、复杂、无意义(想个名字费劲) 样式:重复、冗余、不规范、不和谐 页面:错乱、不规范、不和谐 在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。 2,Bootstrap下载官方地址: 中文地址: 我们使用V3版本的Bootstrap,我们下载的是用于生产环境的Bootstrap。 ?3,Bootstrap环境搭建目录结构: bootstrap-3.3.7-dist/
│ ├── bootstrap-theme.css
│ ├── bootstrap--theme.min.css
│ ├── bootstrap-
│ ├── glyphicons-halflings--halflings--halflings--halflings--halflings-
└── npm.js
处理依赖: 由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。 二,Bootstrap全局样式排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式。 我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式,从而使我们的页面更美观和谐。 标题相关标题: 一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
副标题:
一级标题小标题
文本对齐
文本左对齐
文本居中
文本右对齐
文本大小写
Lowercased text.
Uppercased text.
Capitalized text.
表格
内联表单 表单状态 带图标的表单 按钮Link
Button
样式按钮:
(默认样式)Default
(首选项)Primary
(成功)Success
(一般信息)Info
(警告)Warning
(危险)Danger
(链接)Link
按钮大小:
(大按钮)Large button
(大按钮)Large button
(默认尺寸)Default button
(默认尺寸)Default button
(小按钮)Small button
(小按钮)Small button
(超小尺寸)Extra small button
(超小尺寸)Extra small button
图片图片状态: 辅助类文本颜色: ...
...
...
...
...
...
背景颜色: ...
...
...
...
...
关闭按钮: <
下拉三角: 快速浮动: ...
...
内容快居中: ...
清除浮动:
...
显示与隐藏: ...
...
三,常用Bootstrap组件1,字体图标 2,下拉菜单 3,按钮组 4,输入框组 5,导航 6,分页 7,标签和徽章 8,页头 9,略说图 10,进度条 模拟滚动的进度条: $d1 = $("#d1" width = 0 theID = setInterval(setValue,200<span style="color: #0000ff;">function<span style="color: #000000;"> setValue() {
<span style="color: #0000ff;">if (width === 100<span style="color: #000000;">) { clearInterval(theID); } <span style="color: #0000ff;">else<span style="color: #000000;"> { width++<span style="color: #000000;">; $d1.css("width",width+"%").text(width+"%"<span style="color: #000000;">); } } 四,响应式开发为什么要进行响应式开发?随着移动设备的流行,网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发。 什么是响应式?利用媒体查询,让同一个网站兼容不同的终端(PC端、移动端)呈现不同的页面布局。 用到的技术:CSS3@media查询 用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。 常见属性:
语法: {}
不同的媒体使用不同的stylesheet viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。 设置viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
Bootstrap的栅格系统
注意事项: 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。 五,JavaScript插件1,Bootstrap自带插件: 2,FontAwesome字体: 3,SweetAlert系列: 4,Toastr通知: 一个不错的管理后台模板 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |