Bootstrap起步介绍

时间 2019-11-08

标签 bootstrap 起步介绍栏目 Bootstarp 繁體版

原文原文链接

起步

简要介绍Bootstrap,以及如何下载、使用，还有基本模板案例等等.css

下载

下载bootstrap有三种形式.html

用于生产环境的Bootstrap

编译并压缩后的Css、Javascript和字体文件.不包含文档和源文件.html5

Bootstrap基于Less的源码

Less、Javascript和字体的源文件,而且带有文档，须要Less编译后方可用于生产环境.jquery

Bootstrap基于Sass的源码

Sass、Javascript和字体的源文件,而且带有文档，须要Sass编译后方可用于生产环境.android

安装

经过Bower进行安装

bower install bootstrap

经过npm进行安装

npm install bootstrap

文件目录

预编译版

bootstrap/ios

glyphicons-halflings-regular.eotnginx
glyphicons-halflings-regular.svggit
glyphicons-halflings-regular.ttf程序员
glyphicons-halflings-regular.woffgithub
glyphicons-halflings-regular.woff2
bootstrap.js
bootstrap.min.js
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css

css/
js/
fonts/

Less源码

bootstrap/

examples/
css/
js/
fonts/
less/
js/
fonts/
dist/
docs/

Less源码的编译

在程序员须要对Bootstrap进行定制时咱们会用到Less源码的编译,Bootstrap使用Grunt做为编译系统.对grunt还不了解的能够到http://gruntjs.com/先了解一下.这里编译须要用到的命令以下:

grunt dist

从新生成/dist/目录,并将编译压缩后的Css和Javascript放入这个目录中.做为一名Bootstrap用户,大部分状况你只须要执行这个命令.

grunt watch

监测Less源码文件的改变,并自动从新将其编译为Css文件.

grunt test

在PhantomJS环境中运行JSHint和QUnit自动化测试用例.

grunt docs

编译并测试CSS、Javascript和其余资源文件.在本地环境下经过jekyll serve运行Bootstrap文档时须要用到这些资源文件.

grunt

编译并压缩CSS和Javascript文件、构建文档站点、对文档作html5校验、从新生成定制工具所需的资源文件等.都须要jekyll工具.这些只有你对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'/>
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/></head><body>
    <h1>hello world!</h1>
    <script src='../bower_components/jquery/dist/jquery.js'></script></body></html>

禁止响应式布局

Bootstrap会自动帮你针对不一样的屏幕尺寸调整你的页面.使其在个个尺寸的屏幕上表现良好.下面咱们列出了如何禁用这一特性.

移除设置浏览器视口的标签：<meta>
经过为.container类设置一个width值从而覆盖框架的默认width设置,例如width:970px !important;.请确保这些设置所有放在默认的Bootstrap Css文件的后面.
若是使用了导航条,须要移除全部导航条的折叠和展开行为.
对于栅格系统布局，额外增长.col-xs-*类或替换掉.col-md-*和.col-lg-*.针对超小屏幕设备的栅格系统可以在全部分辨率的环境下展开.

浏览器和设备的支持状况

被支持的浏览器

在Windows平台下,咱们支持ie8+.

Bootstrap在Chromium和Linux版Chrome、Linux版Firefox和IE7上的表现也很不错,虽然咱们不对其进行官方支持.

IE8和IE9是被支持的,然而，你要知道不少CSS3属性和HTML5元素(例如,圆角,矩形和投影)是不被支持的.另外,IE8须要Respond.js配合才能实现对媒体查询的支持

IE8与Respond.js

Respond.js与Css文件不在同一域下时须要额外的设置.请参考respond.js文档获取更多信息.
Respond.js在file://协议下无效
Respond.js对经过@import 引入的css无效.

IE8与box-sizing

当box-sizing:border-box;与min-width max-width min-height max-height一块儿使用时,IE8不能彻底支持box-sizing属性.因为此缘由，从BootstrapV3.0.1版本开始,咱们再也不为.container赋予max-width属性.

IE8与@font-face

当@font-face与:before在IE8下共同使用时会出现问题.因为BootStrap对Glyphicons的样式设置使用了这一组合方式,若是某个页面被浏览器缓存了,而且此页面不是经过点击刷新按钮或经过iframe加载的,那么就会致使字体文件还没有加载的状况下就开始绘制此页面.当鼠标滑过页面时，页面上的某些图标就会显现，鼠标滑过其余没有显现的图标时,这些图标就能显示出来了.

IE兼容模式

Bootstrap不支持IE古老的兼容模式.为让IE有更好的渲染,建议将下面标签添加到页面中:

<meta http-equiv='X-UA-Compatible' content='IE=edge'/>

360极速模式

将下面代码添加到页面中：

<meta name='renderer' content="webkit"/>

模态框、导航条和虚拟键盘.

超出范围和滚动

body元素在ios和android上对overflow:hidden的支持颇有限,致使的结果就是在这两种设备上的浏览器，当你滚动屏幕超过模态框的顶部或底部时,body中的内容开始随着滚动.

虚拟键盘

若是你正在使用fixed定位的导航条或在模态框上面使用输入框,还会遇到IOS在页面绘制上的bug.当触发虚拟键盘后，其不会更新fixed定位的元素,这里有几种解决方案.包括将fixed定位转换为position:absolute定位.或者启动一个定时器手工修正组件的位置.

导航条上的下拉菜单

在IOS设备上,用于导航组件的复杂的z-indexing属性，.dropdown-backdrop元素并未被使用.所以,为了关闭导航条上的下拉菜单，必须直接点击下拉菜单上的元素(或者任何其余可以触发IOS上click事件的元素).

移动设备上应用 :hover/:focus

尽管在大多数触屏上没有真正的悬停状态,大多数移动设备浏览器模拟了悬停（hover）状态并让:hover状态多展示一下子.换句话说,轻触元素后开始应用:hover样式,而且在用户轻触其余的元素以后中止应用:hover样式.在这些浏览器中，Bootstrap的hover状态可能不是你所指望的.某些移动浏览器中的:focus状态也存在一样的问题.对于这些问题，除了彻底清除这些样式,目前尚未简单的解决方法.