正文 

当前位置： 首页 > java > java示例

21bootstrap框架

飞刀还问情      2022-02-13     757

关键词：

http://www.bootcss.com/
Bootstrap 插件==全部依赖 jQuery==
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。
在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

Bootstrap 是==移动设备优先==的

为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。

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

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

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

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
==container== 类用于==固定宽度并支持响应式布局==的容器。

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

==.container-fluid== 类++用于 100% 宽度，占据全部视口（viewport）的容器++。

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

技术分享图片

使用单一的一组 ==.col-md-*== 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。==所有“列（column）必须放在 ” .row 内。==

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

运行结果：
技术分享图片

如果在一个 .row ++内包含的列（column）大于==12个==，包含多余列（column）的元素将作为一个整体单元被另起一行排列。++

列偏移

使用 ==.col-md-offset-==* 类可以将++列向右侧偏移++。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

运行结果：
技术分享图片

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。++被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。++

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

运行结果：
技术分享图片

列排序

通过使用 ==.col-md-push-== 和 ==.col-md-pull-== 类就可以很容易的改变列（column）的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

运行结果:
技术分享图片









转：在线框架引用bootstrap/jq/jqmobile/css框架

bootstrap百度调用<scriptsrc="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><linkhref="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"/> 查看详情

bootstrap框架

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前... 查看详情

css框架-bootstrap

本文内容1.BootstrapBootstrap：1.概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。 *框架:一个半成品软件，开发人员可以在框架... 查看详情

laravel项目中使用bootstrap框架

Laravel如何引入Bootstrap如官方文档所言，Laravel并不强制你使用CSS框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js（在Laravel5.7之前的版本位于 resources/assets/js/bootstrap.js）中，我们可以看到对 bootst... 查看详情

2021-05-21对比go的web框架gin和beego(代码片段)

...另一个运用了beego框架两个项目的前端都使用的是HTML结合Bootstrap库的css（运用CDN） 查看详情

bootstrap框架

 1、Bootstrap的介绍和响应式Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、javascript的，它简洁灵活，使得Web开发更加快捷。它用于开发响应式（自适应）布局、移动设备优先的WEB项目。CSS3的@media查... 查看详情

bootstrap框架

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。响应式Web设计(ResponsiveWebdesign)的理念是：... 查看详情

bootstrap简介--目前最受欢迎的前端框架

Bootstrap，是目前最受欢迎的前端框架。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap是由Twitter的MarkOtto和JacobThornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。Bo... 查看详情

前端基础06bootstrap框架(代码片段)

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。Bootstrap下载官方地址：https://getbootstrap.com中文地址：http://www.bootcss.com/Bootstrap环境搭建bootstrap-3.3.7-dist/├──css//CSS文件│├──bootstrap-theme.css//Bootstrap主题样式 查看详情

bootstrap前端框架介绍

Bootstrap简介         Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML/JavaScript框架。Bootstrap是基于HTML5和CSS3开发的，包含丰富的组件，根据这些组件可以快速的搭建一个漂亮... 查看详情

bootstrap

## BootStrap　　1、概念：一个前端开发的框架：Bootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得Web开发更加快捷。　　　　　　* 框架：一个半... 查看详情

bootstrap框架禁用谷歌字体

bootstrap框架禁用谷歌字体 H5框架换字体.png  查看详情

前端框架

Bootstrap 教程Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。本教程将向您讲解Bootstrap框架的基础，通过学习这些内容，您将可以轻松地创建Web项目。... 查看详情

h5框架之bootstrap

...来的时间里，我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习，以案例的形式、对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了。如果你想详细的学习Bootstrap，建议去http://noob.d8jd.com/noob/5.html这里学习... 查看详情

day14-前端之bootstrap框架

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前... 查看详情

jquery，bootstrap框架

目录jQuery操作标签文本值操作属性操作文档处理事件bootstrap框架内容jQuery操作标签语法上肯定比JavaScript简洁原生js代码查找标签绑定的变量名推荐：xxxElejQuery代码查找标签绑定的变量名推荐使用：$xxxEleclass操作jQuery操 查看详情

angularjs+bootstrap搭载前台框架——准备工作

1.关于什么是AngularJS以及什么是bootstrap我就不多说了，简单说下，angularjs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：http://angularjs.org/ ... 查看详情

bootstrap框架

...给大家分享技术、知识和生活*各种干货，记得关注哦！*/Bootstrap框架一、下载安装当您下载了Bootstrap的已编译的版本，解压缩ZIP文件，您将看到下面的文件/目录结构：如上图所示，可以看到已编译的CSS和JS（bootstr 查看详情