之前都是自己把页面的代码一个一个的敲出来，没有使用框架来布局，这样的做法有好处也有不好的地方，好处吧就是可以记住一些代码，不好之处就是不够框架布局的快。我自己之前有一个想法能不使用框架就不使用，前几天才新布局的网页就没有使用框架，全部是自己敲打出来的，除了一下js的特效外，因为框架毕竟是大了点，而且有些都可以自己打出来，何必要使用框架呢，就这样我就少学了框架，现在为了效率、为了赶上社会进步的步伐、为了团队还是赶紧学一些框架，也可以解决一些问题，现在先学习一下bootstrap框架，之前也使用过一点点，就学习了一些，就没有深入的学习了，现在进行深入的学习，加油。
1：一开始在head中添加------初始化移动浏览显示
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
2：引入bootstrap中的css、js和jquery.js
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
进入一些小的学习：
1：我们在web制作中，常常会碰到在一个标题后面紧跟着一个小的副标题。在bootstrap中给副标题使用<small>标签，由于<small>内的文本字体在h1-h3内，其大小都设置为当前字号的65%；在h4-h6中则是75%。
<!--bootstrap中使用了<small>标签来制作副标题-->
<h1>bootstrap标题一<small>副标题</small></h1>
2:粗体------给需要强调的字加上<strong></strong>标签
<p>我在学习<strong>bootstrap</strong>,我要掌握<strong>bootstrap</strong>的所有知识。</p>
3：斜体------css中可以使用font-style: italic实现，在bootstrap中直接使用<em>或<i>来实现。
<p>我在学习<em>bootstrap</em>,我要掌握<i>bootstrap</i>的所有知识。</p>
4：强调相关的类----在bootstrap中使用以上的标签外，还定义了一套类名
1：.text-muted: 提示，使用浅灰色（#999）
2：.text-primary:主要，使用蓝色（#428bca）
3：.text-success:成功，使用浅绿色（#3c763d）
4：.text-into:通知信息，使用浅蓝色（#31708f）
5：.text-warning:警告，使用黄色(#8a6d3b)
6：.text-danger:危险，使用褐色（#a94442）
5：表格-------在table中添加class名，根据下面的解释，要什么表格就添加对应的class名字
在bootstrap中为表格不同的样式风格提供了不同的类名，
1-------table:基础表格
2-------table-striped：斑马线表格
3-------table-bordered:带边框的表格
4-------table-hover：鼠标悬停高亮的表格
5-------table-condensed:紧凑型表格
6-------table-responsive:响应式表格
eg:基础表格-----table
<table class="table">
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr><td>表格单元格</td></tr>
</tbody>
</table
6:基础表单-----邮箱的输入格式不对的话就提示输入不正确
<form role="form">
<div class="form-group">
<label for= "exampleInputEmail1">邮箱：</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
</form>
今天就先学习到这，下次继续，如有地方写的不对，望多多指教，互相学习，一起进步
网友评论