app.component.ts import { Component } from '@angular/core'; @Component({selector: 'a"> 【分享】bootstrap学习笔记 - 11GX
首页 > 【分享】bootstrap学习笔记

【分享】bootstrap学习笔记

一、基础知识

1.整体架构
以响应式设计为理念,css组件、js插件+jquery、基础布局组件和12栅格系统搭建。
1.1响应式设计:结合media query查询,适应更多设备,自动适应用户的设备环境,不必为每个终端做一个特定的版本。
2.css12栅格系统
将容器平分12份,行(row)必须包含在.container中,只有列(column)可作为行的直接子元素。ps:如果要充满屏幕100%显示,那就不能用container样式了,因为该样式针对4种不同的屏幕大小固定了尺寸,可自己定义一个样式,注意修复container的-15px的外边距。
3.基本用法
3.1列组合:使用数字来合并,有点类似colspan,col-md-4,其中col指的是列,md指的是中型屏幕,4指的是12列中占4列的宽度,实现方式为左浮动加宽度百分比
3.2列偏移:使用offset来定义,具体样式如:.col-md-offset-*,实现原理是利用1/12的margin-left
3.3列排序:通过push(推)和pull(拉)来改变左右浮动,以左为基准
4.响应式栅格
4.1跨设备组合定义:md-中屏,超小-xs,小型-sm,大屏-lg。向大兼容,不支持向小兼容。
4.2清除浮动:在定义支持多个设备的样式时,比如:col-xs-6 col-sm-3,在超小屏有可能会发生错位,需要用clearfix来清除,比如:
,visible-xs是指当能够在超小屏幕上显示
5.css组件
原理:附加和覆盖的原则,后边的样式覆盖掉前面的样式
5.1颜色样式:默认为很多组件提供了5种颜色,分别是primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
5.2尺寸样式:一般组件都有4种尺寸:超小(xs)、小型(sm)、普通(default也可以不写,默认)、大型(lg)。
同一个组件的不同类型的样式可以组合到一起使用,比如颜色样式btn-success和尺寸样式btn-lg,示例:btn btn-success btn-lg

转载于:https://www.cnblogs.com/zinan/p/5809585.html

更多相关:

  • 举例:   如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>>>p {font-size: 14px;text-align: justify;line-height: 26px;color: #666;m...

  • CSS样式表 CSS作用是美化HTML网页。 /*注释*/    —— 注释语法 样式表的基本概念1-1        样式表分类 (1)   内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多。 例:内联样式表

    (2)   内嵌样式表 作为一个独立区域内嵌...

  • 原文:【百度地图API1.1】修改文本标注的样式百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080"; label.getDom().style.color = "#333"; label.getDom().style.cursor = "pointe...

  • 前言  做前端已有不短的时间了,在css这片领域越走越久、越走越远,回过头来看看,有很多技能知识掌握了就不会再忘了,比如无图片实现三角形、ie下如何实现半透明效果等等;但有些东西却需要在项目实战中不断地碰壁、总结,再碰壁、再总结,慢慢地去找到适合自己的方法,然后遵循这样的方法,去开发,以收到事半功倍的效果。本篇文章就属于后者,因为是...

  • kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间、朋友圈、QQ、微信、微博等分享;联系按钮组包含了 微信、QQ、旺旺、Skype、电话等快捷沟通方式。演示地址 跨屏UI框架-响应式前端框架_基于Bootstrap的大组件UI框架​ui.kuapi...

  • 本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。#Vue 实现组件信息的缓存当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-a...

  • 2020年Vue面试题Interview●●●●作者:@烦恼会解决烦恼vue核心知识——理论篇1、对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少。Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开...

  • app.component.html

    父组件字号:{{fontSizePx}}px

    app.component.ts ...fontSizePx=12...

  • app.component.html  app.component.ts import { Component } from '@angular/core'; @Component({selector: 'a...