Bootstrap

第一步：下载

第二步： 解压缩

第三步：引入（head内部  link引入）

Bootstrap 全局样式

移动设备优先：
<meta name="viewport" content="width=device-width, initial-scale=1">
（需要在<head>  之间添加元数据标签

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">）


<meta http-equiv="X-UA-Compatible" content="IE=edge">（告诉IE浏览器以最高规格渲染）
 
.c1 {
    background-color: red;
    padding: 10px 20px;
    margin: 0 auto;
    height: 100px;
    width: 100px;
}     margin:0 auto  为 自动居中

一.布局容器
<div class="container">

  ...

</div>

或

<div class="container-fluid">

  ...

</div>

二.栅格系统





<div class="col-xs-6  c1 col-xs-push-6">

</div>

<div class="col-xs-6 c2 col-xs-pull-6">

</div>

或

<div class="col-md-6 col-xs-6 c1  col-xs-offset-3">

</div>

一共12列








三.媒体查询




@media screen and (max-width: 700px) {

            .c1 {

                background-color: green;

放 style 里 








@media screen and (max-width: 700px) {

            .c1 {

                background-color: green;

放 style 里 




四 嵌套列




<div class="row">

  <div class="col-sm-9">

    Level 1: .col-sm-9

    <div class="row">

      <div class="col-xs-8 col-sm-6">

        Level 2: .col-xs-8 .col-sm-6

      </div>

      <div class="col-xs-4 col-sm-6">

        Level 2: .col-xs-4 .col-sm-6

      </div>

    </div>

  </div>

</div>









												


											
BBOTSTRAP的更多相关文章
	

    
				

	


随机推荐
	

    
									
  1. 18.函数复习，文件处理b模式(二进制处理)，文件处理其他高级玩法
			
    1.函数复习 # map # l = [1,2,3,4,5] # print(list(map(str,l))) # reduce # l = [1,2,3,4,5] # from functools ...
    
			
    2. 
						
  2. Linux中编写shell脚本的小例子
			
    1.创建一个test.sh的文件 touch test.sh 2.编辑这个文件 vi test.sh 3.进入到编辑页面后将编辑页面先切换成编辑模式(按Esc键就可以切换) 4.切换到编辑模式后开始向 ...
    
			
    3. 
						
  3. JAVA CONCURRENT FRAMEWORK
			
    1.ConcurrentHashMap 在并发中使用hashmap容易导致死锁,hashmap存在以下问题 1.线程不安全的hashmap 在多线程环境下使用hashmapPut操作时会引起死循环,因 ...
    
			
    4. 
						
  4. vue-awesome-swiper手动滑动后不再自动轮播的问题
			
    <swiper :options="swiperOption" ref="mySwiper" > <!--轮播图内容--> </s ...
    
			
    5. 
						
  5. FPM简介(定制rpm包)
			
    FPM简介 fpm是生成rpm包的工具.rpm包的制作,采用fpm工具完成,FPM非常易用,此命令可以把rpm包的安装.卸载做得更加优雅,在安装前可以做一些准备工作,安装后可以做一些收尾工作,在卸载前 ...
    
			
    6. 
						
  6. 20191107-8 beta week 2/2 Scrum立会报告+燃尽图 07
			
    此作业要求参见 http://edu.cnblogs.com/campus/nenu/2019fall/homework/9960 小组名称:“组长”组 组长:杨天宇 组员:魏新,罗杨美慧,王歆瑶,梅 ...
    
			
    7. 
						
  7. Java后台创建Socket服务接收硬件终端发送的数据
			
    最近项目中有遇到后台接收硬件终端发送的数据并解析存储的需求,代码总结如下(有时间再来一一讲解,最近比较忙): @Override public void start() { ExecutorServi ...
    
			
    8. 
						
  8. 「模拟赛 2018-11-02」T3 老大 解题报告
			
    老大 题目描述 因为 OB 今年拿下 4 块金牌,学校赞助扩建劳模办公室为劳模办公室群,为了体现 OI 的特色,办公室群被设计成了树形(n 个点 n − 1 条边的无向连通图),由于新建的办公室太大以 ...
    
			
    9. 
						
  9. 「Luogu P3395」路障  解题报告
			
    点开有惊喜 其实是题面 这D1T1给的很有面子! 我居然做的来! 从左上角走到右上角 然后n<=1000 所以果断放弃DFS,选择BFS 思路还是一样的BFS 证明: 走到一个点的时间越早越好( ...
    
			
    10. 
						
  10. kettle高级教程-自动同步
			
    KETTLE4个工作中有用的复杂实例--2.两表数据比较,比较后自动同步(部门.单位数据同步) 二.两表数据比较核对,核对后自动同步至目标数据表 目标:比较t_bm表的数据和t_bm_target表的 ...
    
			
    11.