最受欢迎的前端框架 —— 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 实际上就是 ...
随机推荐
- python练习:一行搞定-统计一句话中每个单词出现的个数
一行搞定-统计一句话中每个单词出现的个数 >>> s'i am a boy a bood boy a bad boy' 方式一:>>> dict([(i,s.spl ...
- STM32 一个定时器产生4路 独立调频率,占中比可调,脉冲个数可以统计。
实现这个功能,基本原理是利用STM32 的输出比较功能. 1.其它设置就是普通定时器的设置这里开启,四个输出比较中断,和一个更新中断, 更新中断这里不需要开也可以达到目的,我这里开启是做其它的用处的. ...
- oj练习---dp专题
1.POJ 3744 Scout YYF I 经典的dp模型,但是要用到快速矩阵幂加速,分段的思想 # include <stdio.h> # include <algorithm& ...
- 解决keepalived脑裂问题
检测思路:正常情况下keepalived的VIP地址是在主节点上的,如果在从节点发现了VIP,就设置报警信息 脚本如下: #!/bin/bash # 检查脑裂的脚本,在备节点上进行部署 LB01_VI ...
- Kali Linux没有无线网卡?玩个锤纸~
一.USB无限网卡 使用Kali linux,先准备好一个适合Kali系统的USB外置无限网卡,注意内置网卡并不适合渗透测试. Linux系统的指令相对于一般人来说比较晦涩难懂,最好选择免驱动类型,省 ...
- 每日linux命令学习-head命令和tail命令
本节主要学习了linux文件浏览的相关命令,包括cat.less.more.read.tail等,由于本人经常使用cat.less.more命令,已经较为熟悉,所以本节重点学习head命令和tail命 ...
- nginx的gzip压缩功能
我们在开发网站的时候,应该要考虑到pv,因为pv比较大可能会造成服务器带宽不够用,进而导致用户体验变差. 这个时候我们就可以考虑用nginx的gzip功能. 在nginx中开启gzip压缩功能很简单, ...
- php脚本#!/usr/bin/env php写法的好处
脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它.比如php脚本的第一行可以写成如下几种格式#!/usr/bin/php#!/usr/bin/env php#!/us ...
- jar中META-INF
一直记得META-INF中只有在直接启动jar可执行文件时需要在manifest中配置启动类,最近看dubbo的配置,发现dubbo的配置都丢在META-INF下,特地搜索了下,官网对于META-IN ...
- shell脚本一键安装nginx
依赖包安装包放在一起, 直接执行这个脚本就行. #!/bin/bash #--------------------------------------------------------------- ...