Web前端 — Bootstrap（1）-低调大师

Web前端 — Bootstrap（1）

2018-05-31 693

Bootstrap本次知识点：

1.Bootstrap简介

2.什么是Bootstrap

3.为什么使用Bootstrap

4.Bootstrap的结构

5.BootStrap的基本模板

1.Bootstrap简介

Bootstrap,来自Twitter（全国最大的微博）的两名技术工程师研发的一个基于HTML、CSS、JavaScript的开源框架，是目前最受欢迎的前端框架。该框架代码简洁、视觉优美，可用于快速、简单地构建于PC及移动端设备的Web页面需求。

Bootstrap下载及演示：

国内文档翻译官网：http://www.bootcss.com/

瓢城Web俱乐部官网：http://www.ycku.com/

2.什么是Bootstrap

Bootstrap是基于HTML、CSS、JAVASCRIPT的开源前端框架，它简洁、直观、强悍、灵活，使得Web开发更加快捷，用于开发响应式布局、移动设备优先的WEB项目。

3.为什么使用Bootstrap

为什么使用Bootstrap？

（1）跨设备：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。

（2）跨浏览器：（chrome、IE9以上、Firefox、Safari、Opera……）所有的主浏览器都支持Bootstrap。

（3）响应式布局：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

（4）具有实用性强的组件：Bootstrap的[HTML组件]和[JS组件]非常丰富，并且代码简洁，非常易于修改，你完全可以在其基础上修改成自己想要的任何样子。这是工作效率的极大提高。

（5）内置jQuery插件：Bootstrap的插件开发模式和javascript的开发模式很相似，先定义一个类，实现主体功能，然后是个Plugin函数，再把这个函数扩展到JQuery上原型上，最后委托的方式给特定元素绑定事件。

（6）删格系统：可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。实现这个功能依赖两个东西，一个是view,另一个是 max-width，min-width。

4.Bootstrap的结构

Bootstrap的结构，主要分为三大核心模块：css（样式）、js（脚本）、 font（字体）。

css（样式）：目录中有四个css后缀的文件，其中包含min字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解css代码的文件；而map后缀的文件则是css源码映射表，在一些特定的浏览器工具中使用。

js（脚本）：目录包含两个文件，是未压缩和压缩的js文件。

font（字体）：目录包含了不同后缀的字体文件。

5.Bootstrap的基本模板

Bootstrap的基本模板，如下代码：

<!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>

 
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 
   <h1>hello</h1>

 
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 
   <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 
   <!--bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5-->

 
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

 
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

</body>

</html>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80331937

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！

微信关注我们

原文链接：https://yq.aliyun.com/articles/613053

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

C# 获取当前屏幕的宽高和位置

上一篇博客《C# 获取当前屏幕DPI》，介绍了如何获取当前屏幕的DPI设置本章主要介绍如何获取当前窗口所在屏幕的信息当前屏幕信息如果当前是单屏幕，可以直接获取主屏幕 var primaryScreen = Screen.PrimaryScreen; 如果当前是多屏，建议通过窗口句柄获取Screen信息 var window = Window.GetWindow(ExportButton);//获取当前主窗口 var intPtr = new WindowInteropHelper(window).Handle;//获取当前窗口的句柄 var screen = Screen.FromHandle(intPtr);//获取当前屏幕获取屏幕高宽/位置 DpiPercent DPI转换比例常量，DpiPercent = 96; 为何DpiPercent为96 ？有一个概念“设备无关单位尺寸”，其大小为1/96英寸。比如：【物理单位尺寸】=1/96英寸 * 96dpi = 1像素；【物理单位尺寸】=1/96英寸 * 120dpi = 1.25像素；关于WPF单位和系统DPI，可以参...

2018-06-01

810

零、前言原文：Introduction 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了《JavaScript 编程精解（第 2 版）》 We think we are creating the system for our own purposes. We believe we are making it in our own image… But the computer is not really like us. It is a projection of a very slim part of ourselves: that portion devoted to logic, order, rule, and clarity. Ellen Ullman，《Close to the Machine: Technophilia and its Discontents》这是一本关于指导电脑的书。时至今日，计算机就像螺丝刀一样随处可见，但相比于螺丝刀而言，计算机更复杂一些，并且，让他们做你想让他们做的事情，并不总是那么容易。如果你让计算机执行的任...

2018-06-01

643

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Eclipse

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。