Bootstrap介绍
Bootstrap它是基于jQuery,也就是意味着用Bootstrap之前必须导入jQuery文件
建议用3.x版本&＃xff0c;不要轻易使用最新版
Bootstrap特点&＃xff1a;只用修改类属性就是修改页面的样式
使用方法&＃xff1a;
下载&＃xff1a;https://v3.bootcss.com/
第二种是用cdn地址引用&＃xff1a;
布局容器
左右有固定留白全屏展示
栅格系统
一个row就表示一行&＃xff0c;这一行默认给你平均分成12份&＃xff0c;每一份你还可以分成12份
div class&＃61;"container"><div class&＃61;"row"> 一行<div class&＃61;"col-md-6 c1">div> 控制你占当前行的多少列
借助谷歌浏览器自动切换手机或电脑屏幕&＃xff0c;只需要加一个col-xs-6生成对应的布局
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距&＃xff08;margin&＃xff09;。
例如&＃xff0c;.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列&＃xff08;column&＃xff09;的宽度。
<div class&＃61;"row"><div class&＃61;"col-md-4">.col-md-4div><div class&＃61;"col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4div>
div>
表格标签
<table class&＃61;"table table-bordered table-hover table-striped">table>
<tr class&＃61;"active">...tr>
按钮
<button class&＃61;"btn btn-success">buttonbutton><button class&＃61;"btn btn-info">buttonbutton><button class&＃61;"btn btn-warning">buttonbutton><button class&＃61;"btn btn-danger">buttonbutton><button class&＃61;"btn btn-primary">buttonbutton><a href&＃61;"http://www.xiaohuar.com" class&＃61;"btn btn-primary">Linka>
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号