Bootstrap——起步概览

最新推荐文章于 2025-01-17 13:33:50 发布

kuuhakuna

最新推荐文章于 2025-01-17 13:33:50 发布

阅读量189

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/kuuhakuna/article/details/78710562

版权

bootstrap 专栏收录该内容

11 篇文章

订阅专栏

环境安装

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;
}