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

    进入中文官网:http://www.bootcss.com
     
    开始第一个Demo
     
    准备工作:
    (1)进入bootstrap中文官网,点击起步
    (2)下载生产环境
            下载好的文件是一个压缩文件,学习时建议使用未压缩版本,项目开发时必须使用压缩版本。
     
    (3)找到基本模板,将其复制粘贴进来,当然,必要时需要按需求进行更改。
     
    1. 学习bootstrap首先需要理解的是栅格系统,看官网(http://v3.bootcss.com/css/#grid-intro)给的定义:
          我们需要理解的是col-xs- 、colo-sm- 、col-md- 、col-lg- 的用法,bootstrap本身的定义是一行固定有12列,其中这些后面跟的数字就是当前模块所占的列数,占满12列就是一行,多出来的就挤到下一行,跟之前的float思想一样。
    通常的做法是:
    <section id=“id”>    //设定一个大的模块
        <div class="container”>    //定义里面存放内容模块
            <div class="row”>        //定义一行,里面默认12列
                <div class="col-md-12" >    //定义一个模块,在992px-1200px这个像素区域内所占12列。
                    <h2>xxxxxxxx</h2>
                </div>
            </div>
        </div>
    <section>
     
    1. 组件
    参考官网地址(http://v3.bootcss.com/components/),直接引用。
     
    1. JavaScript插件
    常用的用模态框(弹出框)、标签页、carousel(轮播图)、提示弹出框
    用法(比喻):
    直接把下面给出的代码copy进去,然后按需求进行更改即可。
     
     
  • 相关阅读:
    jquery选择器
    frameset的target属性
    最长回文子串 南邮NOJ 1100
    最长回文子串 南邮NOJ 1100
    最长回文子串 南邮NOJ 1100
    NOJ 蛇形填数 1094
    NOJ 蛇形填数 1094
    NOJ 蛇形填数 1094
    NOJ 蛇形填数 1094
    开灯问题 南邮NOJ 1589 (另一种解法)
  • 原文地址:https://www.cnblogs.com/pengjunhao/p/7107431.html
Copyright © 2011-2022 走看看