您的位置：首页 > Web前端 > BootStrap

[Bootstrap]7天深入Bootstrap(1)入门准备

2020-03-01 09:10 1231 查看

由于申请了一个域名，一个云主机，开始弄个人网站。

发现Bootstrap非常方便，和重要，故开始学习与分享关于Bootstrap的技术。

 

推个广告

个人网站：http://www.51pansou.com

BootStrap视频下载：Bootstrap视频

BootStrap源码下载：Bootstrap源码

 

本节目录：

  • 简介

  • 入门

  • 基本模板

  • CSS基本语法

  • JS基本语法

  • 扩展

 

 

 

简介

Bootstrap是目前最流行的前端开发框架，由Twitter的两位前 员工Mark Otto和Jacob Thornton在2010年8月份创建。它是一套 基于Less的前端开发库（最新版也包含了Sass源码），提供了很多常见并常用的各种CSS和JavaScript合集，以便开发人员随时上手。

 

Bootstrap提供了如下重要的特性：

  • 一套完整的基础CSS插件。

  • 丰富的预定义样式表。

  • 一组基于jQuery的JS插件集。

  • 一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动先行（Mobile First）的思想。

从V3.1.0开始，Bootstrap的License授权改成了MIT协议。 MIT是目前最为宽松的协议，大家可以放心地在各种商业环境中使用它。

 

入门

cdn：

?    

　　

Bootstrap框架的文件和源码可以在其官方网站 （www.getbootstrap.com）下载。点击链接可以看到3个下载链接

 

下载Bootstrap，下载的内容是编译后可以直接使用。包括未经压缩的文件和经过压缩处理的文件。

下载源码，是用于编译CSS的Less源码，以及各个插件的JS源码。

下载Sass项目，是用于编译CSS的Sass源码，以及各个插件的JS源码。

 

文件结构

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

 

3.X版和2.X系列版本有一个很大区别，就是2.x系列版本用于展示icon小图标的.png图 片不见了，取而代之的是fonts目录的4种类型的字体文件。我们称这种方式为@font-face版本的icon实现，该字体来自glyphicons.com网站，并得到免费授权。通过这种技术显示图标的好处是，图标可以被任意缩放、改变颜色。

对文件的css、js文件夹名称 进行随意重命名，但是不能对fonts文件夹进行重命名，因为CSS 文件里的源码使用了相对路径（../fonts/）

注意bs的所有js插件都是基于jQuery的，要确保在使用这些功能的时候引用相应的jQuery文件。

 

基本模板

 

<!DOCTYPE html><html lang="zh-CN">
  <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script>
  </body></html>

 

 

由上述模板代码可以看出，3.x和2.x版本相比，有一个很大的 区别，就是多了以下一行代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

 

这就是我们前面提到的，Bootstrap从3.0版本开始全面支持移动平台了，并将贯彻移动先行（Mobile First）的宗旨。

上述代码 的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小。

 

CSS基本语法

Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。

 

 

HTML5辅助设计

在bs中，出现了不是以data-开头的 自定义属性，我们称之为辅助属性。

这些属性是HTML5新提出的概念，用于支持残障人士、老年人、文化水平不高或暂时患病的 人使用屏幕阅读器进行页面访问。

 

aria-hidden="true"表示对屏幕阅读器隐藏该div 元素

role="navigation"表示该区域用于导航 



个人网站：http://www.51pansou.com

BootStrap视频下载：Bootstrap视频

BootStrap源码下载：Bootstrap源码

 

转载人:www.51pansou.com



转载于:https://my.oschina.net/u/2614009/blog/613384

  • 点赞
  • 收藏
  • 分享
  • 文章举报
chongshan1968 发布了0 篇原创文章 · 获赞 0 · 访问量 58 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航