博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端技术——bootstrap
阅读量:5070 次
发布时间:2019-06-12

本文共 1281 字,大约阅读时间需要 4 分钟。

bootstrap

 

Web框架

 

http://how2j.cn/k/boostrap/boostrap-tutorial/538.html#nowhere

 

使用:

1.导入Js和css

a.导入bootstrap的开发环境

<link rel="stylesheet" href="css/bootstrap.css" />

<link rel="stylesheet" href="css/bootstrap-theme.css" />
<script src="js/bootstrap.js"></script>

 

b.导入jq的引入

<script src="js/jquery.min.js"></script>

 
2.样式结构       嵌套使用   
  每行共12

<div class="container">

<div class="row">

<div class="col-md-6">ds</div>
<div class="col-md-6">dsds</div>
</div>
</div>

 
3. col-xs-            col-sm-          col-md-       col-lg-         区别
 
 
 
4.设置高度   

<div class="col-md-6 " style="height: 100px;">b1</div>

 
5.移动offset列的位置
 
col-md-offset-1   移动一个位置
<div class="col-md-6   
col-md-offset-1" >b3</div>
 
 
6.微调列位置
push推3格

<div class="col-md-6   col-md-push-3 " >b4</div>

拉回3格

<div class="col-md-6   col-md-pul-3 " >b4</div>

 
7.使用small作为副标签

<div class="col-md-6 col-md-push-3 " >

<h1> zx  <small>zxxx</small>   </h1>
<h2>dsd</h2>
</div>

 

8.设置行高和字体

<body style="line-height: 40px; font-size: 30px;">

 
9.段落 突出  
<p 
 class="lead"> xx</p>
 
 
10.mark   、del、ins
 
11.居中
<div class="col-md-12
    text-center">dsdasdasdsadasds</div>
 
12. em  小号字small    
<em>...</em>
<small>....</small>
 
13
.无序列表
<ol>
<ul>1</ul>
<ul>2</ul>
<ul>13</ul>
<ul>14</ul>
<ul>15</ul>
</ol>
 
有序列表:
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
 
 
 
 
 
 
 
 
 
 
 

转载于:https://www.cnblogs.com/StingLon/p/9816677.html

你可能感兴趣的文章
奇异矩阵(转载)
查看>>
plsql 跨表 update
查看>>
迷途漫漫,终有一归
查看>>
自主开发与带兵打仗
查看>>
三级菜单
查看>>
mysql truncate 的问题
查看>>
切换Oracle数据库实例
查看>>
python 路径操作
查看>>
选项卡
查看>>
Win10系列:VC++调用自定义组件2
查看>>
Qt 的入门小程序
查看>>
Tomcat中配置网站路径
查看>>
Loadrunner 脚本开发-利用web_custom_request函数进行接口测试
查看>>
关联式容器
查看>>
算法训练 Torry的困惑(基本型)
查看>>
SSM框架构建多模块之业务拆分实践
查看>>
lombok问题
查看>>
算法图解之散列表
查看>>
Redis 命令
查看>>
Random获得的随机数怎么样减少重复率
查看>>