Bootstrap——起步概览

来源：互联网发布：华为软件研发面试题编辑：程序博客网时间：2024/05/23 23:03

环境安装

http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

基本模板

<html lang="en">    <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的HTML标准模板</title>           <!-- Bootstrap -->        <link href="css/bootstrap.min.css" rel="stylesheet">        <!--你自己的样式文件 -->        <link href="css/your-style.css" rel="stylesheet">                <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->        <!--[if lt IE 9]>        <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>        <![endif]-->    </head>    <body>        <h1>Hello, world!</h1>        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>     </body></html>

width=device-width使宽度为设备宽度，intia-scale=“1”代表页面无任何缩放。

width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上
user-scalable:是否可对页面进行缩放，no 禁止缩放。

全局CSS样式

HTML5文档类型
移动设备优先
主流浏览器支持
响应式图像

移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

网格系统

随着屏幕的尺寸增加，系统会自动分为最多12列。

工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

HTML5文档类型

因为使用了HTML5中的一些元素，所以使用其文档类型

<!DOCTYPE html><html>....</html>

移动设备支持

device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

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

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

.img-responsive {  display: block;  height: auto;     //设置 height:auto，相关元素的高度取决于浏览器。  max-width: 100%;   //设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。}

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

全局显示

body {  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 14px;  line-height: 1.428571429;  color: #333333;  background-color: #ffffff;}

容器

<div class="container">  ...</div>

用于包裹页面内容

阅读全文

0 0