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

Web前端 — Bootstrap（1）

2018-05-31 748

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

866

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

703

资源下载

更多资源

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

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

WebStorm

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