正文 

当前位置： 首页 > java > java框架

bootstrap框架

Ethan      2022-02-14     143

关键词： 

Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
响应式Web设计(Responsive Web design)的理念是：
　　页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
Bootstrap：各种命名都统一并且规范化。 页面风格统一，画面和谐。
下载：
  官方地址：https://getbootstrap.com
    中文地址：http://www.bootcss.com/

Bootstrap中文文档：https://v3.bootcss.com/getting-started/

bootstrap的导入
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   <!--告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。-->
    <meta name="viewport" content="width=device-width, initial-scale=1">  <!--移动端适配(手机)-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- 导入Bootstrap样式 -->
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">

  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
  </body>
</html>
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。
注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
  ...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
  ...
</div>
技术分享图片 
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
 Bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
栅格系统简介及工作原理

 




bootstrap框架

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

css框架-bootstrap

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

21bootstrap框架

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

laravel项目中使用bootstrap框架

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

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 查看详情

java单体应用-常用框架-01.bootstrap

原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap.html更多教程：光束云-免费课程Bootstrap序号文内章节视频1概述2阅读对象3前置知识4为什么使用Bootstrap5Bootstrap包的内容6参考资源请参照如上章节导航进行阅读1.概述Bootstr... 查看详情