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

Web前端 — Bootstrap（1）

2018-05-31 810

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-05-31

911

零、前言原文：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-05-31

752

资源下载

更多资源

Mario

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

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。