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. Vijos1035 贪婪的送礼者 [map的应用]
			
    1.题意:一群人之间每人准备了一些钱互相送(你们好无聊(⊙o⊙)…),数据给出了每人准备的金额与送出的对象,且保证送给每人的金额是平均的,最后要求出每个人收到的比送出的钱多的数目. 2.分析:模拟题, ...
    
			
    2. 
						
  2. 29(30).socket网络基础
			
    转载:https://www.cnblogs.com/linhaifeng/articles/6129246.html 一 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网 ...
    
			
    3. 
						
  3. 服务发现之eureka
			
    一.什么是服务发现? 问题: 我们现在有多少个服务? 服务越来越多时,服务 URL 配置管理变得非常乱 服务对外的地址变了,其他所有有使用到的服务都要改地址 增加服务,增加服务实例等,都要做运维工作  ...
    
			
    4. 
						
  4. DEVOPS技术实践_05：sonar静态代码扫描
			
    一.SonarQube静态代码扫描平台 1.1 安装 https://www.sonarqube.org/官网 1.2 下载软件包 https://www.sonarqube.org/download ...
    
			
    5. 
						
  5. saltstack的配置配置
			
    一.为不同的环境设置不同的文件目录 1.1 修改配置文件 /etc/salt/master [root@node1 salt]# vim /etc/salt/master file_roots: ba ...
    
			
    6. 
						
  6. java做插入时ID为自增获取到ID
			
    <selectKey keyProperty="id" resultType="int" order="AFTER"> sele ...
    
			
    7. 
						
  7. 虚拟DOM学习与总结
			
    虚拟DOM 虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,一般称之为虚拟节点(VNode) 优点:解决浏览器性能问题 ,真实DOM频繁排版与重绘的效率是相当低的,虚拟DOM进行频 ...
    
			
    8. 
						
  8. 记: Spring Data Jpa @OneToMany 级联查询被动触发的问题
			
    I have encountered a bug in using Spring Data Jpa. Specifically,when @OneToMany was used to maintain ...
    
			
    9. 
						
  9. ChromeDriver+Selenium安装
			
    介绍 Selenium是一个自动化测试工具,利用它我们可以驱动浏览器执行特定的动作,如点击.下拉等操作. ChromeDriver是一个Chrome浏览器驱动,用于驱动Chrome浏览器完成相应的操作 ...
    
			
    10. 
						
  10. 小米6X谷歌套件
			
    话不多说真机测试完美适配,安卓万物基于谷歌链接如下(个别MIUI版本不同谷歌商店会报错,如遇到请留言我会第一时间回复解决) 链接:https://pan.baidu.com/s/1b2Cs0u9J2b ...
    
			
    11.