bootstrap(一)

最新推荐文章于 2024-09-28 08:36:51 发布

一个半路出家的人

最新推荐文章于 2024-09-28 08:36:51 发布

阅读量865

点赞数

分类专栏：前端Html

本文链接：https://blog.csdn.net/qq_42039281/article/details/83479215

版权

前端Html 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

bootstrap是一个前端框架,包括:基本结构,bootstrap CSS,Bootstrap 布局组件,bootstarp插件几个部分.

基本结构包括:栅格系统,连接样式,背景的基本结构,

CSS: bootstrap子代以下特性:全局的css设置,定义基本的HTML元素样式,可扩展的class,以及一个先进的网格系统

组件: 有十几个组件,包含创建图像,下拉菜单,导航,警告框,弹出框

JavaScript插件,bootstrap包含十几个自定义的jQuery插件

定制: 也可以定制bootstrap的组件,LEss变量和jQuery插件

1,HTML模板

我们需要在HTML中引入一些插件,才能使用bootstrap模板

a,jQuery文件,bootstrap是基于jquery的一个框架,因此要在bootstrap的js文件之前引入jQuery的js文件

b,bootstrap的css文件

c,bootstarp的核心js文件,h5的js文件,repond响应式布局js文件

下面代码是bootstrap的基本模板:


<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[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.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

国内推荐使用Staticfile CDN上的库:对于用户来讲加载更加迅速


<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

基础模板详解

1,Bootstrap使用了一些H5和css属性,因此需要h5的文档类型,(Doctype)

2,移动设备优先,需要在head中添加 viewport meta属性

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

width 属性控制设备的宽度, device-width其宽度自适应屏幕

initial-scale=1.0 确保网页加载时,以1 : 1 比列呈现 ,不会有任何的缩放

在viewport meta 标签中添加user-scalable=no 可以其缩放(zooming)功能

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

(一),css样式: img-responsive

响应式图像

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

全局显示、排版和链接

基本的全局显示

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。

请看下面有关 body 的设置：

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

第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二条规则设置文本的默认字体大小为 14 像素。

第三条规则设置默认的行高度为 1.428571429。

第四条规则设置默认的文本颜色为 #333333。

最后一条规则设置默认的背景颜色为白色。

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

链接样式

通过属性 @link-color 设置全局链接的颜色。

对于链接的默认样式，如下设置：

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

所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 #2a6496。同时，会呈现一条下划线。

除此之外，点击过的链接，会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。

以上所有这些样式都可以在 scaffolding.less 中找到。

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

容器（Container）

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

Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

.container:before,
.container:after {
  display: table;
  content: " ";
}

这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。

.container:after {
  clear: both;
}

它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Bootstrap 浏览器/设备支持

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

旧的浏览器可能无法很好的支持。

下表为 Bootstrap 支持最新版本的浏览器和平台：

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	不适用	不适用	不适用
iOS	YES	不适用	不适用	不适用	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	不适用