配置使用

下载文件引用

下载方式：Bootstrap官网 https://www.bootcss.com/

引用

例：

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <link href="css/bootstrap.min.css" rel="stylesheet">#就这一行

    <title>Document</title>

</head>

引用在线文件

例：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1 class="text-right">你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

简单的使用

Bootstrap对于css与jquery对于JavaScript相似。

例：

<!DOCTYPE html>

<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">

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

    <title>Document</title>

</head>

<body>

    <ins><p class="text-right">xob is a handsome boy</p></ins>

    <table class="table">

        <tr>

            <th>one</th>

            <th>two</th>

            <th>three</th>

        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td>4</td>

            <td>5</td>

            <td>6</td>

        </tr>

    </table>

</body>

</html>

以上用到bootstrap的有：<class='table'>,,<class="text-right">

我们为标签添加bootstrap中的类名即可使用。

Bootstrap 基本配置与应用的更多相关文章

  1. Kubelet bootstrap认证配置步骤

    kubelet 授权 kube-apiserver 的一些操作 exec run logs 等 RBAC 只需创建一次就可以 kubectl create clusterrolebinding kub ...

  2. 基于bootstrap table配置的二次封装

    准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...

  3. Custom Settings.ini 和 bootstrap.ini 配置

    [Settings]Priority=DefaultProperties=MyCustomProperty [Default] ;SkipWizard=YES 如果跳过部署向导,则即使 SkipCap ...

  4. Bootstrap table方法，Bootstrap table事件，配置

    调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...

  5. 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

    vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ ​ 2.安装cnpm: >: npm install -g cnpm --regis ...

  6. Bootstrap UI 编辑器

    1. BootSwatchr BootSwatchr 是由 Drew Strickiand 独立开发和维护的,是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具,这也是它的特色之一.Bo ...

  7. 超棒的 15 款 Bootstrap UI 编辑器

    自从 2011 年 Mark Otto 和 Jacob Thornton 开发了  Bootstrap,我们第一次接触并熟知了 Bootstrap .这些都归功于  Twitter!从那以后,它就非常 ...

  8. MVC使用Bootstrap

    ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers 摘要: 序言ASP.NET MVC允许开发者创建自定义的HTML Helper ...

  9. Bootstrap框架的了解和使用（一）

      前  言 Bootstrap 什么是 Bootstrap?Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JavaScrip ...

随机推荐

  1. JAVA WEB基础巩固之Json、Ajax

    一.Json(Json介绍)json校验工具 Json是JavaScript object notation的缩写,优点是易读易编写易于解析: 例如:Object: { "name" ...

  2. CALL/APPLY、一些编程基础以及一些基础知识、正则

    call.apply.bind 求数组的最大值和最小值: 数组排序(SORT的原理->localeCompare实现汉字比较),取头取尾 假设法 利用APPLY传参传递的是一个数组的机制,借用M ...

  3. Selenium 实现自动下载文件（FirefoxOptions，FirefoxProfile） - 根据Selenium Webdriver3实战宝典

    Firefox 版本是72geckodriver 是 0.24selenium 是3.14 代码中注释有关于FirefoxOptions,FirefoxProfile的解释,请各位寻找一下,不做另外解 ...

  4. Pro SQL Server Internal (Dmitri Korotkev)电子书翻译P8-14（12w）

    数据行与数据列 数据库的控件逻辑上分成8KB的页,这些页从0开始,连续排序,对特定的文件ID和页码有借鉴意义.页码编号一定是连续的,当SQL服务器中的数据库文件增加时,新的数据页从最高的页码开始编码. ...

  5. Dubbo中@Service工作过程解析

    Dubbo中@Service工作过程解析 Spring中的BeanPostProcessor 首先我们应当了解到在spring体系中BeanPostProcessor是什么.加载流程 它是什么 Bea ...

  6. 全差分运算放大器ADA4930的分析(2)

    前面解释了在ADA4930组成的单端转差分电路的输入电阻RIN的大小,可知当RF=RG=1KΩ的时候,RIN=1.33KΩ. 图1单端转差分电路 如图1所示,假设信号源为2V VPP的信号,信号源的内 ...

  7. 基于均值坐标(Mean-Value Coordinates)的图像融合算法的具体实现

    目录 1. 概述 2. 实现 2.1. 准备 2.2. 核心 2.2.1. 均值坐标(Mean-Value Coordinates) 2.2.2. ROI边界栅格化 2.2.3. 核心实现 2.2.4 ...

  8. 神奇的background——绘制图形

    相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片,这时候通常就拿起ps就是切切切.不说这种方式麻烦,有ui给你切好的情况已经不错,没有的就有自己动手.还可能有需要切一整张超大图的情况. ...

  9. 对javaweb项目中web.xml重用配置的理解（个人学习小结）

    <!-- 所有的总结描述性与语言都在注释中 --><?xml version="1.0" encoding="UTF-8"?> < ...

  10. Redis系列三 - 缓存雪崩、击穿、穿透

    前言 从学校出来,做开发工作也有一定时间了,最近有想系统地进一步深入学习,但发现基础知识不够扎实,故此来回顾基础知识,进一步巩固.加深印象. 最初开始接触编程时,总是自己跌跌撞撞.不断摸索地去学习,再 ...