bootstrap入门

最新推荐文章于 2024-03-26 09:40:03 发布

喜只狼果冻

最新推荐文章于 2024-03-26 09:40:03 发布

阅读量275

点赞数

分类专栏：此恨绵绵无绝期

本文链接：https://blog.csdn.net/qq_36750352/article/details/106837882

版权

此恨绵绵无绝期专栏收录该内容

27 篇文章 0 订阅

订阅专栏

第一章：简介

Bootstrap 教程

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

分为Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分

文件结构

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

已编译的 Bootstrap 文件结构

已编译的 CSS 和 JS（bootstrap.*）

已编译压缩的 CSS 和 JS（bootstrap.min.*）

Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

引入方式

静态

将jquery.js、bootstrap.min.css、bootstrap.min.js放到项目中引入

<!DOCTYPE html>
<html>
   <head>
      <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">
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
      <!-- 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
         <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>
   </head>
   <body>
   </body

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>

第二章：Bootstrap CSS

1、概述

HTML 5 文档类型（Doctype）

需要使用 HTML5 文档类型（Doctype）

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

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标

initial-scale=1.0

确保网页加载时以 1:1 的比例呈现

user-scalable=no

可以禁用其缩放（zooming）功能

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

响应式图像

img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

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

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

注意：

如果需要让使用了 .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;
}

链接样式

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

避免跨浏览器的不一致

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

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

容器（Container）

Bootstrap 3 的 container class 用于包裹页面上的内容

2、Bootstrap 网格系统

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

a、行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）

b、列通过内边距（padding）来创建列内容之间的间隙，通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

c、网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-xs-6 col-sm-3"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

3、排版

内联子标题

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

引导主体副本

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。</p>

强调

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

4、代码

<p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
<pre>
    &lt;article&gt;
        &lt;h1&gt;Article Heading&lt;/h1&gt;
    &lt;/article&gt;
</pre>

5、表格

<table class="table">
  <caption>基本的表格布局</caption>
  <thead>
    <tr>
      <th>名称</th><th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td> <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td> <td>Mumbai</td>
    </tr>
  </tbody>
</table>

6、基本表单

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

输入框（Input）

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

文本框（Textarea）

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

静态控件

在一个水平表单内的表单标签后放置纯文本时，在 <p> 上使用 class .form-control-static。

<div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
</div>

7、按钮

可用于<a>, <button>, 或 <input> 元素上

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

第三章：Bootstrap布局组件

1、Bootstrap 字体图标(Glyphicons)

Bootstrap 捆绑了 200 多种字体格式的字形

点击这里，查看可用的字体图标列表。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

第三章：Bootstrap 插件

Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动

警告框

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong>警告！</strong>您的网络连接有问题。
</div>

喜只狼果冻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap入门

第一章：简介Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。分为Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分文件结构当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：已编译的 CSS 和 JS（bootstrap.*）已编译压缩的 CSS 和 JS（bootstrap.min.*）G
复制链接

扫一扫