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. Channel 9视频整理【4】
			
    Eric ShangKuan 目前服務於台灣微軟,擔任技術傳教士 (Technical Evangelist) 一職,網路上常用的 ID 為 ericsk,對於各項開發技術如:Web.Mobile.A ...
    
			
    2. 
						
  2. hibernate配置文件模板
			
    hibernate.cfg.xml 配置文件模版: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-config ...
    
			
    3. 
						
  3. Mac-安装命令一览表
			
    最近一直在学习Mac,可谓是撞了南墙撞西墙,各种问题需要动手去解决. 今天整理下在笔者Mac下面的各种命令 苹果自带的命令 sudo git ruby node 需要我们安装的命令 brew gem  ...
    
			
    4. 
						
  4. Linux 批量安装依赖
			
    1.依赖检测失败,xxx被xxxx需要. 当我安装rpm 的时候,出现依赖检测失败. 我们可以到http://rpmfind.net/linux/rpm2html/search.php 这个网站上去搜 ...
    
			
    5. 
						
  5. 小白学 Python 爬虫（31）：自己构建一个简单的代理池
			
    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
    
			
    6. 
						
  6. Pillow库来着
			
    第一步肯定是安装啦 pip install pillow 如果安装报错,可以升级一下pip库,因为有可能是pip版本低了......... pip show pip 升级用 python -m pip ...
    
			
    7. 
						
  7. sql计算上一周（解决了跨年会出错的问题）
			
    1.问题描述: 使用YEARWEEK('时间字段')=YEARWEEK(NOW())-1来筛选上一周数据时,当遇到跨年的时候会出现计算错误的问题. eg: 如上图,当前日期为2020年1月6日.上图标 ...
    
			
    8. 
						
  8. ad域-iis
			
    环境准备: 1. win server 服务器安装完成 2.配置主机名 3.配置静态ip 安装ad域和iis 重启服务器 密码记住!!! 点击安装 把服务器的NDS设置成本机ip 重启完成 注意:ad ...
    
			
    9. 
						
  9. Linux下卸载oracle需要删除的文件
			
    卸载oracle需要删除的文件 rm -rf /data1/oracle/app  #oracle安装目录在/data1/oracle中 rm -rf /usr/local/bin/dbhome rm ...
    
			
    10. 
						
  10. spring boot介绍
			
    spring boot简介 1.spring boot是spring家族中的一个全新的框架,它用来简化spring应用程序的创建和开发过程,也可以说spring boot能简化我们之前采用ssm框架进 ...
    
			
    11.