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学习的更多相关文章

  1. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  2. 简洁灵活的前端框架------BootStrap

      前  言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...

  3. 前端框架——Bootstrap

    一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...

  4. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  5. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  6. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  7. 关于前端框架BootStrap和JQueryUI（以及相应的优秀模板）

    近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...

  8. 前端框架Bootstrap（10.7国庆补写）

    框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...

  9. 推荐web前端框架bootstrap

    bootstrap是基于Jquery而开发的一个前端框架. 全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 实际上就是 ...

随机推荐

  1. JS 测试网络速度与网络延迟

    一.延迟与网速 通过js加载一张1x1的极小图片,测试出图片加载的所用的时长.如果换一个几百KB的图片,则可心用来计算下载网速 document.write('<input type=" ...

  2. Prometheus监控学习笔记之prometheus的远端存储

    0x00 概述 prometheus在容器云的领域实力毋庸置疑,越来越多的云原生组件直接提供prometheus的metrics接口,无需额外的exporter.所以采用prometheus作为整个集 ...

  3. Baidu WebFE(FEX)团队开发 的 文件上传插件 WebUploader

    1.webUploader官网下载地址:http://fex.baidu.com/webuploader/ 直接下载代码,运行examples目录文件即可 2.webUploader上传demo:ht ...

  4. Zookeeper集群方式安装

    分布式安装部署 配置系统环境变量等 /etc/profile export JAVA_HOME=/opt/app/jdk1.8.0_181 #export CLASSPATH=.:${JAVA_HOM ...

  5. spring Boot(十九)：使用Spring Boot Actuator监控应用

    spring Boot(十九):使用Spring Boot Actuator监控应用 微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台 ...

  6. oracle exadata一体机虚拟机

    14年参加partner培训的时候,拿了份oracle exadata一体机虚拟机,有兴趣的可以试试,不过比较大,压缩后10GB,解压后50GB,启动后直接可用,2RAC节点+1存储节点,环境最好内存 ...

  7. $ORACLE_HOME/rdbms/demo示例安装

    需要手工安装p13390677_112040_Linux-x86-64_6of7.zip,或者win32_11gR2_examples.zip.默认不包含. 从Oracle Database 12c ...

  8. linux 实时显示网速bash

    执行方法先授权再运行 chmod +x shi.sh脚本+网卡名称 ./shi.sh ens33 #!/bin/bash while [ "1" ] do eth=$1 RXpre ...

  9. bzoj 2753 [SCOI 2012] 滑雪与时间胶囊 - Prim

    题目传送门 传送点I 传送点II 题目大意 给定一个有$n$个点$m$条边的图,每个点有一个高度$h_{i}$,能从$u$经过一条边到达$v$,当且仅当存在一条边是$(u, v)$或$(v, u)$, ...

  10. bzoj 3122 随机数生成器 - BSGS

    Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数.   接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. ...