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. JSPs
			
    简介 Tomcat 8.0 使用 Jasper 2 JSP 引擎去实现 JavaServer Pages 2.3 规范. Jasper 2 经过了重新设计,极大改善了上一版 Jasper 的性能.除了 ...
    
			
    2. 
						
  2. 027.MFC_映射消息
			
    映射消息MFC中的消息映射宏 DECLARE_MESSAGE_MAP BEGIN_MEASSAGE_MAP END_MESSAGE_MAP向导自动映射消息手动添加映射消息 MFC会帮我们自动映射大部分 ...
    
			
    3. 
						
  3. KEIL5.11安装小结
			
    一.注意点 1.安装路径不能带中文,必须是英文路径 2.安装目录不能跟 51 的 KEIL 或者 KEIL4 冲突,三者目录必须分开 3.KEIL5 不像 KEIL4 那样自带了很多厂商的 MCU 型 ...
    
			
    4. 
						
  4. CPP 设计模式学习
			
    源地址 https://www.ev0l.art/index.php/archives/20/ 备忘录模式 在一个类内部记录另一个类的快照状态的模式.可以再合适的时候跳回复用 设计备忘录的三大步骤:  ...
    
			
    5. 
						
  5. Python学习3月5号【python编程 从入门到实践】---》笔记
			
    ---恢复内容开始--- 1.变量 一.只能包含字母.数字.下划线.****不能以数字开头作变量 二.不能包含空格, 三.不要将python关键字和函数名用作变量名 四.最好能有描述性和简短的特征 五 ...
    
			
    6. 
						
  6. 基于WPF&Prism&AvalonEdit的XAML轻量编辑器
			
    1. 写在前面 一直从事WPF的相关开发工作,有时为了尝试或演示某些仅仅基于XAML的效果时,但又不想大动干戈打开VS去创建项目,所以一个轻便简单,集编辑与预览于一身的XAML编辑器就显得格外重要.  ...
    
			
    7. 
						
  7. 洛谷P1385 密令 题解 动态规划
			
    题目链接:https://www.luogu.com.cn/problem/P1385 题目大意: 给定一小写字母串s,每次操作你可以选择一个p(1<=p<|s|)执行下述修改中的任意一个 ...
    
			
    8. 
						
  8. Date、Time类型拼接成字符串
			
    Date.Time类型拼接成字符串 语言用的是kotlin,和Java类似 var time = "" val sdf1 = SimpleDateFormat("yyyy ...
    
			
    9. 
						
  9. Codeforces Round #609 (Div. 2)前五题题解
			
    Codeforces Round #609 (Div. 2)前五题题解 补题补题…… C题写挂了好几个次,最后一题看了好久题解才懂……我太迟钝了…… 然后因为longlong调了半个小时…… A.Eq ...
    
			
    10. 
						
  10. A*寻路算法的个人理解
			
    A*寻路算法是一个求两点之间的最短路径的方法 算法详情如下: 准备工作: 两个容器:   open容器和close容器 价值估算公式:    F = G + H G:从起点移动到指定方格的移动代价:  ...
    
			
    11.