最受欢迎的前端框架 —— Bootstrap学习
Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的，是目前最受欢迎的前端框架，它简单灵活，使得Web前端开发更加快捷方便。
首先，要基本掌握Bootstrap框架：Bootstrap基本结构、Bootstrap CSS、Bootstrap 布局组件、Bootstrap 插件，以及用LESS实现定制。
Bootstrap的特点：
- 响应式布局设计：布局自动适应设备尺寸（但是移动设备优先）。
- 移动设备优先：从Bootstrap 3起，移动设备优先的样式，贯穿整个框架的库。
- 所有主流浏览器都支持Bootstrap。
- 为开发人员创建了，提供统一解决方案的接口。
- 开源、可基于Web定制。
Bootstrap 包的内容：
- 基本结构：提供了一个带有网格系统、链接样式、背景的基本结构。
- CSS特性：一些全局的CSS设置、定义了基本的HTML元素的默认样式、可扩展的class、以及先进的网格系统的样式。
- 布局组件：包含10多个可重用的组件，用于创建图像、下拉菜单等。
- 插件：包含10多个自定义的jQuery插件，可以选择包含的插件。
- 定制Bootstrap：还可以定制Bootstrap的组件、LESS变量、jQuery插件，来获得自己的Bootstrap版本。
预编译版的Bootstrap的文件目录结构：
其中包含了Glyphicons的 fonts，这也是一个可选的主题。
Bootstrap 源代码（也包含预编译的文件）的文件结构：
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。很明显，我们通常选择预编译版的压缩版。
引入Bootstrap的文件：
- <!-- 直接使用CDN（压缩版:4.x版本好像还有问题，要报错，一些响应式样式也没有了） -->
- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- <!-- 使用bootstrap的javascript插件之前，需要引入jQuery -->
- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
使用Bootstrap的CSS样式：
由于Bootstrap使用的样式多是H5和CSS3，所以html页面的doctype声明最好是H5的：<!DOCTYPE html>。
Bootstrap3最显著的变化是移动设备优先（然后才是桌面设备），因为移动端的用户越来越多了，在这以前必须要引入另一个css，才能让项目更好地支持移动设备，现在bootstrap本身的css文件就对移动设备友好支持。
响应式图像：
- <!-- 保证图像不会超过父元素的尺寸 img-responsive{display:inline-block;max-width:100%;height:auto;} -->
- <!-- inline-block：相对周围元素，以inline呈现，却可以像block元素一样，设置height、width -->
- <img src="1.jpg" class="img-responsive" />
Bootstrap使用Normalize来实现跨浏览器的一致性：使用了体积很小的Normalize.css文件。
容器类Container（用于包裹其内容）：
- <!-- .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;} -->
- <div class="container">hello</div>
移动设备优先策略：
优先设计更小的宽度。基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
最受欢迎的前端框架 —— Bootstrap学习的更多相关文章
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- 简洁灵活的前端框架------BootStrap
前 言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...
- 前端框架——Bootstrap
一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...
- 前端框架Bootstrap
前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/
- 前端框架Easyui学习积累
前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...
- 前端框架 bootstrap 的使用
内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...
- 关于前端框架BootStrap和JQueryUI（以及相应的优秀模板）
近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...
- 前端框架Bootstrap（10.7国庆补写）
框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...
- 推荐web前端框架bootstrap
bootstrap是基于Jquery而开发的一个前端框架. 全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 实际上就是 ...
随机推荐
- 转：【专题二】HTTP协议详解
我们在用Asp.net技术开发Web应用程序后,当用户在浏览器输入一个网址时就是再向服务器发送一个HTTP请求,此时就使用了应用层的HTTP协议,在上一个专题我们简单介绍了网络协议的知识,主要是为了后 ...
- python PIL 图像处理操作
python PIL 图像处理 # 导入Image库 import Image # 读取图片 im = Image.open("1234.jpg") # 显示图片 im.show( ...
- P1258 小车问题
P1258 小车问题 蒟蒻精神自强不息蒟蒻精神永不言败加油加油ヾ(◍°∇°◍)ﾉﾞyeah yeah yeah 据说这是道小学奥数题抱歉蒟蒻的我没学过奥数,算了大概三大张演草纸,不得不说这题对于蒟蒻本 ...
- SSMS登记密码清除
如图,此界面的登录密码如果要清除,可以找到%AppData%\Microsoft\Microsoft SQL Server\100\Tools\Shell\SqlStudio.bin,将SqlStud ...
- Django中Session
Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: ·数据库(默认) ·缓存 ·文件 ·缓存+数据库 ·加密cookie (1)数据库中的Session Djan ...
- MySQL5.7 的新特点
1.安全性 MySQL 5.7 的目标是成为发布以来最安全的 MySQL 服务器,其在 SSL/TLS 和全面安全开发方面有一些重要的改变. mysql.user表结构升级 MySQL5.7用户表my ...
- Linux LAMP架构搭建
一．部署LAMP基本架构 1.L(linux)A(apache)M(mysql)P(php) 2.稳定版本(mysql5.1,php5.3,apache2.2) 3.安装顺序,mysql-->a ...
- php5.3.x连接MS SQL server2008
开篇 因为毕设老师需求的原因,虚拟旅游网站要求的数据库必须使用MS SQL server. 我最擅长的web编程语言是PHP,但是在PHP中链接MS SQL server是一件非常麻烦的事,我个人分析 ...
- Python3.6.2在线安装pymysql模块
我是一个python新手刚才使用python写邮件发送代码的时候想着需要连接数据库, 下面的安装步骤 python -m pip install pymysql PS C:\Users\hp> ...
- docker 容器配置tocmat时间不统一
1.在tomcat配置文件bin下 vim setenv.sh #!/bin/bashCATALINA_OPTS='-Duser.timezone=Asia/Shanghai'export CAT ...