关于h5框架之bootstrap的小知识

W+7      2022-02-07     171

关键词:

浏览器支持

旧的浏览器可能无法很好的支持

Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器

CSS源码研究

我们不是在head里面引入了下面这些文件么

复制代码
复制代码
复制代码
<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
复制代码
复制代码
复制代码

OK,看核心的,这里从bootstrap.min.css开始,这是压缩了的,看的话最好看没有压缩的版本:http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css

我讲的就是按照非压缩版本的CSS来走的

266行之前基本上都是标签格式化、初始化的一些东西,为了让某些同学更好理解,我把一些特殊的大体提一下。

第一个

input[type="number"]

CSS属性选择器,可能对于初学者来说,或没写过的小盆友就不熟悉了,这个属性就是对<input type=”number”/>标签进行样式渲染,知识 这个,我想你就知道其它的怎么去写了

第二个

display: block;   

这个你可能会说:“这个我知道,转换元素特性呀~~~”,哈哈,没错,但你知道具体转了会怎么样,或为什么要转,与之对应的又是什么呢?

好,我大体说一下(会的朋友就不用看了),在HTML里面有”块元素”与”行内元素”之说,它们各自的默认主要特性:

块元素:独占一行,能设置宽、高度,默认宽度是父容器的100%

行内元素:不独占一行,不能设置宽、高度

知道这个后,那么给元素加一个display: block; 就是把元素转换成块元素,让元素可以设置宽、高度。OK,现在知道这个的用法了吧

第三个

color: #000 !important;

这个嘛,前面部分肯定知道,后面!important是什么鬼???  优化级,也就是说,当它作用到某一个元素上时,只要是支持它的浏览器都会优先为color:#000;,而不管后面有相同的属性被覆盖(当然覆盖的属性值没有加!important的情况)。

第四个

@font-face

267行,这个属性是CSS3里面的,主要功能就是把自定义的web字体嵌入到你的网页中,这样就不怕你的网页不显示一些别个电脑上没有的字体了。用别个的话说,这叫字体图标,字体图标很多系统都有,不是bootstrap才有的哦,好处就是能把图标像字体一样使用,像什么改变颜色,设置大体什么的。好吧,那该怎么用呢?

哈哈,其实不用管,已经弄好了的~~~看下面

复制代码
复制代码
复制代码
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
 …
}
复制代码
复制代码
复制代码

看,CSS引入了几个文件,在上级目录的fonts文件里面,自己打开去看看,不就是这几个么,当然你不用去管它了,知道怎么回事就OK

更多字体图标,看这个:http://noob.d8jd.com/noob/5/117.html

例如:

<span class="glyphicon glyphicon-refresh"></span>

一个刷新的字体图标就出来了

273行到885行全是关于字体相关的css属性

第五个

@media

这个就做自适应就显得重要了,先看它是什么鬼。

字体上就是媒体的意思,其实原理就是规定不同媒体(设备)应用不同的样式而已

 

复制代码
复制代码
复制代码
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
复制代码
复制代码
复制代码

再次声明:如果是min-width设置的,小的在上面,大的在下面,max-width设置的,大的在上面,小的在下面

知道了这个,那么我们想是不是可以混合使用了呢。指定某个区间,看下面:

复制代码
复制代码
复制代码
@media screen and (min-width: 960px) and (max-width: 1199px) { 
…
}
@media screen and (min-width: 768px) and (max-width: 959px) {
…
}
….
复制代码
复制代码
复制代码

意思我就不说了,相信你能看懂

其它的好像没什么了,后面在讲实例的时候我们再回头去分析与之对应的

-转载

h5框架之bootstrap

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

旺财速啃h5框架之bootstrap

上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架....对于不规整的网页,要做成自适应就有点玩大了....例如下面这种版式的页面....  对于这样的网站,要做成自适应,那你得多花点... 查看详情

关于tp框架的小知识

 访问入口文件后在application文件夹中会出现一些文件夹,其中的home文件夹是前端模块,也可以在application文件夹中新建文件夹。home文件夹模块中Conf文件夹的config配置文件,是对于当前模块的:修改当前模式convention配置文件... 查看详情

关于bootstrap的入门知识

问:Bootstrap是什么?答:开源的前端框架,就是一些事先写好的css、js等。 问:Bootstrap在哪儿下载?答:官方(https://getbootstrap.com/),中文(http://www.bootcss.com/) 问:Bootstrap怎么用?答:网页中引入css等,然后为html标签... 查看详情

关于bootstrap的知识

  Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3,具有漂亮的设计、友好的学习曲线、卓越的兼容性,还有12列响应式栅格结构,丰富的组件等等。按照官网的宣传来说,Bootstra... 查看详情

app和h5的小知识

...面的时候,作为前端开发的我们不管是用原声js还是使用框架Vue、React,我们都只是给app提供一个页面而已。一、当app只需要h5做展示的时候,我们就是写一个页面给他们就行了,非常容易。(注意做好兼容)二、当app需要捕获h5... 查看详情

前端h5框架总结

关于单独h5网站项目,目前主要前端框架有:react、vue、bootstrap等,其中react和vue都是用mvvm模式(低耦合、可重用性、独立开发、可测试),数据实时更新,适合app里面嵌入的网页使用,但用在传统web网页上对seo不太好,因为数... 查看详情

关于函数声明的小知识点

C语言编译系统是由上往下编译的.一般被调函数放在主调函数后面的话,前面就该有声明.不然C由上往下的编译系统将无法识别。正如变量必须先声明后使用一样,函数也必须在被调用之前先声明,否则无法调用!函数的声明可以... 查看详情

javaweb之bootstrap(代码片段)

...数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScript文章目录1.Bootstrap概念2.快速入门3.响应式布局4.CSS样式和JS插件4.1.全局CSS样式4.2.组件4.3.插件5.案例1.Bootstrap概念概念:一个前端开发的框架ÿ 查看详情

关于前端css预处理器sass的小知识!

前面的话??"CSS预处理器"(csspreprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得... 查看详情

关于js的小知识

基本数据类型:Undefined,Null,Boolean,Number,String。引用数据类型:Object。 个人觉得对Java等语言的程序员来说,最不能接受的就是下面这样的代码:varnum=2;console.log(num.toPrecision(2));//这不就是2.func()吗。。实际上,js会将2自动包装... 查看详情

关于电脑打印纸的小知识

随着年代的进步,人们关于办公用纸的需求也是越来越多,办公用纸中的电脑打印纸也广泛的被运用,那么关于电脑打印纸的一些小知识,你是不是都了解呢?今天小编就来跟你们来同享一下关于电脑打印纸的小知识。咱们在运... 查看详情

bootstrap的小图标

bootstrapt的小图标 关于bootstrap的<i>小图标,需要几个要素.<i class="icon-search"></i>形式第一个,bootstrap.min.css第二个,就是font-awesome.css 这个东西,它是控制小图标的.第四个!!就是!image!!没有image,就只会出现一个小... 查看详情

day14-前端之bootstrap框架

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

tp框架知识之(链接数据库和操作数据)

...config.php文件,然后找到父类配置文件convention.php文件,将关于"数据库"的部分复制粘贴到config.php配置文件中123456789/*数据库 查看详情

tp框架知识之(链接数据库和操作数据)

...config.php文件,然后找到父类配置文件convention.php文件,将关于"数据库"的部分复制粘贴到config.php配置文件中/*数据库设置*/‘DB_T 查看详情

tp框架知识之(链接数据库和操作数据内容)

...config.php文件,然后找到父类配置文件convention.php文件,将关于"数据库"的部分复制粘贴到config.php配置文件中123456789/*数据库 查看详情

vue和bootstrap的区别?

vue和bootstrap不是一个层级的东西。Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等。Bootstrap很适合做静态网站,比如公司官网。Vue是一套用于构建用户... 查看详情