zoukankan      html  css  js  c++  java
  • Bootstrap概览

    ①   Bootstrap的文档类型为HTML5

    Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。

    ②    移动设备优先

    ③   响应式图片

    通过添加.img-responsive类就可以将图片设置为响应式

    ④   全局显示,排版和链接

    Bootstrap将所有的标签基本上都是重新书写了一遍

    ⑤   避免浏览器的不一致

    ⑥    容器

    Bootstrap的代码基本上都是写在一个div.container的容器里面,这个容器默认是居中。

    ⑦    浏览器的支持

     

    1.       引入bootstrap

    Bootstrap框架含有3个文件夹,分别是css,fonts,js

    bootstrap里面,很多js特效都是基于jquery的,所以,如果想要正常显示bootstrap里面的js特效,需要先引入jQuery

     

     

    2.       栅格系统

    所谓栅格系统,就是在bootstrap里面,系统将空间划分成了12列。默认md的页面宽度为970px

    可以通过col-md-*来指定占多少个栅格

    效果:

            

     

    栅格系统选项

     

    列偏移

    可以使用.col-md-offset-*来指定列向右偏移多少,但是必须要和.col-md-*一起使用

    官方示意图:

     

    排版:

    ①    标题

    bootstrap里面,基本上将所有的标签都重写了一遍

    如下:

     

    bootstrap里面,除了通过h1-h6标签来实现上面的效果以外,还可以通过.h1~.h6也可以实现标题的效果,但是要注意的是只是样式上一样,语义是不同的

    效果:

     

    可以通过small标签或者.small类来标记副标题

    效果:

     

  • 相关阅读:
    Android JNI用于驱动測试
    shell实例浅谈之三产生随机数七种方法
    WEB安全实战(二)带你认识 XSS 攻击
    前端和云端性能分析工具分析报告
    【翻译】Ext JS——高效的编码风格指南
    dubbo协议
    JavaBean对象转map
    messagePack编解码
    主流编码框架
    java编解码技术,json序列化与二进制序列化
  • 原文地址:https://www.cnblogs.com/zuiai/p/6988304.html
Copyright © 2011-2022 走看看