Bootstrap框架技术

1、Bootstrap是前端开发的框架技术，其采用将整个网页划分为12列，进行框架搭建，通过其内部
        特定代码可自动生成对应的各种样式。是比较方便快速的网页编写方法。
2、col-xs-数字（占位的格数）
        row=12，间距30px
3、使用Bootstrap时，需要引入相应的文件
        1、在css文件夹中放入文件夹css，js，和fonts；
        2、引入文件名为.bootstrap.min.css（head部分用link方式引入）
        3、引入js文件{jquery.min.js（前）    <script src"">    
                    bootstrap.min.js(后）（在</body>与</html>之间引入
4、bootstrap为移动设备优先的，并且自带响应式布局，若需要禁用响应式布局可以：
        1、！import方式
        2、对container（最外层div）设置宽度
5、Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。
        <!DOCTYPE html>
        <html lang="zh-CN">
          ...
        </html>
 6、为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        若需要禁用缩放功能，则用：
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    7、栅格选项
    超小屏幕<768px，手机        .col-xs-
    小屏幕设备》768px，平板        .col-sm-
    中等屏幕设备》992px,pc      .col-md-
    超大屏幕》1200px，            .col-lg-

时间： 2024-10-09 23:50:33

Bootstrap框架技术的相关文章

BootStrap框架及其他框架布局技术

负边距实现两栏,三栏布局 clear:both 清除浮动 两栏式: margin-right:-250px 右边内容覆盖左边250px内容 margin-right:250px  在左边套用一个div,然后距离后边预留出250px,这样右边覆盖的250px正好布局两栏 三栏式: 同理两栏式后 margin-left:250px  将最左的内容左浮动,留出250px给自己,同时中间的内容自适应,三栏式形成 圣杯布局: 特色,先写中间的部分,圣杯杯体部分,再写两边的左右部分,将父元素定位:paddi

JEESZ分布式框架--技术介绍文档

摘要: 1.Eclipse IDE:采用Maven项目管理,模块化.     2.代码生成:通过界面方式简单配置,自动生成相应代码,目前包括三种生成方式(增删改查):单表.一对多.树结构.生成后的代码如果不需要注意美观程度,生成后即可用. Rest服务,Redis,Spring,SpringMVC+Mybatis,Dubbo+Zookeeper,Java分布式架构 分布式.微服务.云架构,Spring,SpringMVC,Spring MVC+Mybatis,Dubbo+Zookeeper,Re

Bootstrap框架的学习（一）

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点 完美的支持H5和CSS3,以及支持移动端浏览器 四.内容 可以参考一下官方文档http://v3.

Web前端学习笔记：Bootstrap框架

Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果.此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀. 一个完整的Bootstrap框架包含如下四个部分: 脚手架(不知道官网为啥这么翻译):用于重置背景.链接样式.栅格系统等,并包含两个简单的布局结构.Bo

bootstrap框架理解（转发）

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计.接下来就是要详解Bootstrap框架: 首先,我们要知道为什么使用框架的原理.CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版,网络布局,表单样式,通用规则等代码块.使用CSS框架,可以简化工作,提高工作效率. 然后,我们为

前端UI框架技术选型

需求 为了重构应用开发平台的前端,对目前的UI框架技术进行调研,有以下的标准: 1 要有丰富的控件以便支持大多数的mis系统的需求,如tree/table等 2 轻量不复杂,学习成本少 3 有统一的界面风格与调用接口 4 方便扩展 5 文档丰富 6 社区活跃 UI框架调研 复杂度 开发模式 开源 收费 组件 稳定性 扩展性 性能 兼容性问题 调试 学习成本 可读性 文档 社区 extjs 高/重量 桌面应用/js Y Y 很丰富 高 好/复杂 慢 一点 难 高 差 丰富 活跃 easyui 轻量

基于Bootstrap框架的临床数据管理系统的设计与开发

    基于Bootstrap框架的临床数据管理系统的设计与开发     2018年11月10日 目  录 第一章绪论... 6 1.1 选题背景及其意义... 6 1.2国内外研究现状... 7 1.2.1 临床大数据管理系统发展现状... 7 1.2.2医疗电子表单管理发展现状... 8 1.3研究目标... 9 1.4 研究内容... 10 1.5论文整体结构... 10 第二章相关技术研究... 12 2.1 AngularJS技术简述... 12 2.2 RESTful API +sw

bootstrap框架

bootstrap框架: bootstrap是一套现成的CSS样式集合.能够简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 包含了哪些文件: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min

Bootstrap 框架 栅格布局系统设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会