Bootstrap入门基础（一）

Bootstrap快速入门

最新推荐文章于 2025-05-08 14:43:07 发布

tammy1151

最新推荐文章于 2025-05-08 14:43:07 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： Bootstrap适应的浏览器 Bootstra入门 Bootstrap基本样式 HTML基本格式

本文链接：https://blog.youkuaiyun.com/tammy1151/article/details/52222957

Bootstrap 专栏收录该内容

8 篇文章

订阅专栏

Bootstrap入门基础

Bootstrap，来自Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。总的来说，Bootstrap已经准备好了基本的CSS样式，下载安装安装好预编译的Bootstrap,j就可以设计自己的Web了。可以从http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

学习Bootstrap就是掌握它的基本结构、Bootstrap CSS、Bootstrap布局组件和Bootstrap插件几个部分。小编看来学习完Bootstrap就是要牢记它的编译好的标签，做到心中有数历历在目。要是你还有不错的CSS，Javascript功底那就更好了。

以下开始学习Bootstrap:

1,HTML基本格式如下

<!--Html5文档类型-->
<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>

   <!--字符编码Utf-8,根据自己需要设置-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <!--为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

     <!-- jQuery (Bootstrap 插件需要引入) -->

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- 包含了所有编译插件 -->
    <script src="js/bootstrap.min.js"></script>
 
  </head>
  <body>
  </body>
</html>

2，Bootstrap基本样式（默认的，已经设置好的）

默认设置了字体样式、字体大小、行高、文本颜色、背景颜色

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

链接样式：

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

最常用的class：container

把 container 的左右外边距（margin-right、margin-left）交由浏览器决定,

<div class="container">
  ...
</div>
<!--style-->
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

3,Bootstrap 浏览器/设备支持

Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。旧的浏览器可能无法很好的支持。