Bootstrap入门

来源：互联网发布：清华北大抢人知乎编辑：程序博客网时间：2024/06/08 15:39

导入bootstralp包，min.js和min.css
设置字符编码
移动设备优先
导入jQuery
html5文档类型定义

<meta charset="UTF-8"><!--移动设备优先--><meta name="viewport" content="width=device-width,initial-scale=1" /><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /><title>bootstrap入门</title><script src="js/jquery-1.6.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

css全局样式：

1、布局容器类样式：.container和.container-fluid

.container:固定宽度并且具有响应式

.container-fluid:自由宽度(100%宽度)

2、标题样式<h1>到<h6>

<h1>到<h6>到h6重写了，基本上做到了兼容性

3、行内文本样式：

4、文本对其样式：

.text-left
.text-center
.text-right
.text-justify

5、列表样式：

.list-unstyled(无符号)

.list-inline（行内块）

表格样式：

表单样式：

.form-group 表单组样式:将<label>和表单元素包含其中，可以获得更好的排列
.form-control表单元素样式，用于<input><textarea><select>元素
.form-inline:内联表单样式，可以使元素一行排列
.radio-inline:可以使一组单选框排在同一行
.checkbox-inline:可以使一组复选框排在同一行
.sr-only:可以隐藏元素

Placehoder属性(H5新增加的)：

描述：给<input>添加提示信息

<!DOCTYPE html><html><head><meta charset="UTF-8"><!--移动设备优先--><meta name="viewport" content="width=device-width,initial-scale=1" /><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /><title>bootstrap入门</title><script src="js/jquery-1.6.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body style="padding: 50px; background-color: #31B0D5;" ><div class="text-center"><h1>这是一个标题</h1><p class="text-center">这是一条新闻</p></div><div class="text-center"> <ul class="list-unstyled">前端:<li>html</li><li>css</li><li>javascript</li></ul><ul class="list-inline"></ul>前端:<li>html</li><li>css</li><li>javascript</li></ul></div><div class="container" style="background-color:#C0C0C0;padding: 20px;"><table class="table table-striped"><tr><td>id </td><td>标题 </td><td>作者 </td><td>时间 </td><td>内容 </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table><form><div class="form-group"><label>用户名：</label><input type="text" id="username" placeholder="输入你的用户名" /></div><div class="form-group"><label>密码：</label><input type="password" id="password" placeholder="输入密码" /></div></form></div></body></html>

阅读全文

0 0