zoukankan      html  css  js  c++  java
  • bootstrap框架基本用法

    bootstrap是一种高级的前端开发工具包。它提供了优雅的HTML和CSS规范,由动态CSS语言Less写成。是基于jQuery框架开发的,目前本人还没有对jQuery有系统的学习,所以这里主要是介绍bootstrap的一些基本写法。

    要使用bootstrap和其他框架一样,需要先下载工具包,并且在HTML中引用bootstrap.min.css或者bootstrap.css文件,两者的效果都是一样的差别就在于第一个是简化版,省去了一些没有意义的空格,一般在我们进行开发的时候使用,可以减少占用的内存,但是如果我们要对其源代码进行修改或者查询的话,还是一般使用bootstrap.css。

    bootstrap对许多我们经常使用但自己写又比较麻烦的页面元素有很好的支持,使得我们能非常容易迅速的写出好看的样式,而且如果对其不满意,还可以进行修改,非常非常的牛。

    这里只介绍table,其他的可以直接在API里面找到。

    <table class="table"></table>

    直接写出这句代码,自动生成的表格自己就有了很规范的样式,不用我们在CSS中再进行编写。

    而且还可以许多好看的效果:

    table-striped可以使奇数行的背景设为灰色。

    table-bordered可以使边框显示。

    table-hover可以使鼠标悬停的行的背景变为灰色

    table-condensed可以使行间距变小。

    这些我们都能直接引用,非常的方便,关于这方面就不进行一一介绍,详细可查看API。

    bootstrap还有一个更为牛的地方,Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

    四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg

    xs(超小屏幕)
    sm(小屏幕)
    md(中屏幕)
    lg(大屏幕)

    这个效果对我们在进行不同平台上的开发带来难以想象的便利,它能够根据使用的电脑,手机,ipad..自动对页面进行调节。

  • 相关阅读:
    vue 防抖 节流
    数组取最小数据长度,确定长度截取,看是否全等 ,全等通过不等提示,需要拆分
    数组去重取不重复的数据
    vue
    vue2.0 子组件获取父组件值 使用v-model可渲染不能更改
    使用mpvue 开发小程序 遇到的坑
    ztree 样式更改
    vue 跨域请求
    记录 vue2.0 再使用过程中遇到的问题
    bug
  • 原文地址:https://www.cnblogs.com/zaxxm/p/4060672.html
Copyright © 2011-2022 走看看