首先到v3.bootcss.com下载bootstrap。
打开下载好的bootstarp,里面有三个文件夹(css,js,fonts),目测他只是一个框架,所以也不用安装什么的。
用官网的模板测试一下,可用。
现在就开始:
一、在一个新的html文件中添加三段必备代码——
<link href="css/bootstrap.min.css" rel=""stylesheet><!--bootstrap下的css路径,放在<head>下面-->
<script src="jquery-2.1.4.min.js"></script><!--下载好的jquery路径,可用官网路径-->
<script src="js/bootstrap.min.js"><script><!--bootstrap下的js路径,放在<body>里面,离</body>最近的地方-->
二、使用组件(每一个都有固定的名字,把它的名字给class就可以用了):
1、首先他提供非常之多的字体图标,就像这个小小的十字符号:<span class="glyphicon glyphicon-plus"></span><!--再也不用导入图片或者css自行绘制了。-->
2、按钮格式1:btn btn-default(正常状态);btn btn-link(长成链接的按钮);btn btn-warning(橙色);btn btn-danger(红色);btn btn-success(绿色);btn btn-primary(首选项-蓝色)
按钮格式2:btn-lg(大号),btn-sm(中号),btn-xs(小号),一个大大的红色按钮:<button type="button" class="btn btn-danger btn-lg"><button>
按钮格式3:可以把图标放在button里面,如<button type="button" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-plus"></span>按钮</button>
3、下拉式菜单按钮:class="btn btn-success dropdown-toggle";
4、按钮组:btn-group,可放入多个button,它会自动粘合,使边上两个边角圆润化。class="btn-group btn-group-justified"(两端对齐排列);class="btn-group-vertical btn-group-xs">(垂直排列)。
该贴被CinderellaPink编辑于2015-8-14 10:09:36