bootstrap教程学习

bootstrap为一款流行的前端框架,可用于响应式布局前端界面开发。

一、获取bootstrap文件
英文官网:http://getbootstrap.com/
中文官网:http://www.bootcss.com/
二、创造基础文件
1.IE8开启标准渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2.配置视窗
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
备注:
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
initial-scale - 初始的缩放比例
user-scalable - 用户是否可以手动缩放
3.引入bootstrap CSS样式文件和js文件
4.引入jQuery文件
三、个人网页
1.响应式导航
<nav class="navbar navbar-default navbar-fixed-top">
小导航按钮:
<button class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="icon-bar">
logo:
class="navbar-brand"
导航:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
2.响应式图片:
class="img-response"
3.栅格系统
<div class="container">
<div class="row">
<div class="col-md-4">
1)共分为12份
4.图标
<span class="glyphicon glyphicon-grain mai-icon"></span>
5.链接跳转到按钮
<a href="#" target="_blank" class="btn btn-primary">加入学习</a>
6.地址标志:
<address> </address>

7.CSS 动画库
animate.css 三D动画库
地址:http://www.jq22.com/yanshi819
使用:
<link rel="stylesheet" href="animate.min.css">
<h1 class="animated infinite bounce">Example</h1>
$('#yourElement').addClass('animated bounceOutLeft');

8.
空格:&nbsp;
9.
表格 <table>
标题:
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
内容:
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
标题用 <th>
内容用 <td>
时间 <small></small>
class="pull-right"右浮动
10.
bootstrap 中的面板镶嵌列表组:
去除面板中的 div class="pannel-ody" 可去掉外边框
11.
导航栏中的 navbar-fixed-top 清除顶部浮动

12. chart.js 插件
官网地址:
www.chartjs.org
1)引入 chart.js

CSS:
li{margin:0; padding:0; list-style-type:none;} li清除一点
//textarea高度自适应
textarea{
height: auto;
}
13.bootswatch.bootku.com 样式风格
14.自媒体
文字居右 media-right

 

posted @ 2018-06-30 16:45  拉努斯石  阅读(199)  评论(0编辑  收藏  举报