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. 基于jquery的带事件显示功能的日历板插件calendar.js
			
    项目中需要用到一个日历板控件,要求能显示事件,于是想到了一年前在app项目上写的一个粗略版日历板,然后又想着这个可能以后还会用 于是我就封装了一下,能满足基本要求,如果有需要更多功能的也可以自行修改源 ...
    
			
    2. 
						
  2. javaweb项目添加log4j日志
			
    谈到我们在Java程序中经常用的日志,Log4j应该是耳熟能详了.这里先提下slf4j,英文全名是Simple Logging Facade for Java,直面意思是:Java的简单日志门面.sl ...
    
			
    3. 
						
  3. mysql主从之Mysql_mysql基本安装
			
    下载安装包: https://dev.mysql.com/downloads/mysql/5.7.html#downloads [root@jenkins-master ~]# cd /usr/loc ...
    
			
    4. 
						
  4. 使用SparkSql进行表的分析与统计
			
    # 背景 ​ 我们的数据挖掘平台对数据统计有比较迫切的需求,而Spark本身对数据统计已经做了一些工作,希望梳理一下Spark已经支持的数据统计功能,后期再进行扩展. # 准备数据 在参考文献6中下载 ...
    
			
    5. 
						
  5. $AT2292\ Division\ into\ Two$ $dp$
			
    正解:$dp$ 解题报告: 传送门$QwQ$ 不妨令$A\geq B$,于是先$sort$然后预处理判下如果有三个元素两两差都小于$B$的就直接$GG$了. 然后考虑对集合$X$进行$dp$,剩下的数 ...
    
			
    6. 
						
  6. 【原创】够强！一行代码就修复了我提的Dubbo的Bug。
			
    这是 why 技术的第 28 篇原创文章 之前在<Dubbo 一致性哈希负载均衡的源码和 Bug,了解一下?>中写到了我发现了一个 Dubbo 一致性哈希负载均衡算法的 Bug. 对于解决 ...
    
			
    7. 
						
  7. spring cloud 微服务之 -- 配置文件拆分之道
			
    0-前言 在spring cloud微服务架构中,基本上每个拆分的微服务都会部署多个运行实例,这些运行实例,配置基本都是一样的,不同的是少数配置,比如端口,而这些不同的配置又是必不可少的 那我们怎么来 ...
    
			
    8. 
						
  8. 输入n个字符串，找出最长最短字符串（若有个数相同的，都打印出来）
			
    首先,要求找到最长最短字符串,我们应该用数组将其存起来,输入的个数是不固定的,我们就可以用Scanner获取要输入的个数,最终找到的个数也不固定,我们可以封装两个方法,并且返回值类型为数组. 我遇到的 ...
    
			
    9. 
						
  9. QuartzCore
			
    QuartzCore 说起QuartzCore不知道有多少小伙伴很容易和Quartz2D.CoreGraphics等混淆在一起傻傻分不清楚?所以在下面我们先把这几个很容易混淆或者是分不清楚的框架稍加整 ...
    
			
    10. 
						
  10. Android 平台JS调试技术
			
    1.  测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...
    
			
    11.