初识bootstrap

download first

<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<link href="./css/bootstrap.css" rel="stylesheet" type="text/css">
　　<script charset="utf-8" type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
　　<script charset="utf-8" type="text/javascript" src="./js/bootstrap.js"></script>
</head>

　　

<img src="..." class="img-responsive" alt="响应式图像">

　　

<div class="container">
  ...
</div>

　　

<form role="form-inline">
<div class="container">
　　<div class="form-group">
　　　　<label for="name">name</label>
　　　　<input type="text" class="form-control" id="name" placeholder="请输入">
　　　　<div class="form-group"></div>
　　　　<textarea class="form-control"></textarea>
　　　　<div class="form-group"></div>
　　　　<div class="form-group">
　　　　<select class="form-control input-lg">
　　　　　　<option value="">option1</option>　　　　　　<option value="">option1</option>
　　　　　　<option value="">option1</option>
　　　　</select>
　　　　</div>
　　</div>
</div>
</form>

<ul class="list-group">
　　<li class="list-group-item">11</li>
　　<li class="list-group-item">222</li>
　　<li class="list-group-item">33</li>
</ul>

　　

　　

时间： 2024-10-11 14:17:38

初识bootstrap的相关文章

【Bootstrap】1.初识Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹 接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler

bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）

目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整理成一个系列,从页面常用布局开始,后期陆续增加我觉得有价值的可分享的东西. 众所周知,当我们要学习一门新的开发语言时,就会在部署好环境后,打印出最初的“hello,world!”.也不例外,下面我们就用html5的页面来展示它. <!DOCTYPE html> <html lang=&quo

bootstrap学习起步篇：初识bootstrap之表单验证（二）

学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验证规则.使用jquery验证,能让我们省去一些功夫. 首先我们需要引入js文件:jquery.validate.js:另外为了能使用它的样式,我们需另外引入screen.css.当然,如果要使用bootstrap,还是要引入其所需的文件的. 下面,我们需要一个表单: <form class="

初识 Bootstrap

Bootstrap 概述 Bootstrap 是一个前端框架,使用它可以快速开发响应式页面,还能专门针对 PC 端或移动端快速开发,大大提高了开发效率. Bootstrap 来自 Twitter,是目前最流行的前端框架.它是基于 HTML.CSS.JavaScript 的一个简洁.灵活的开源框架. 1.为什么要使用 Bootstrap 当需要制作响应式的网页来适配各种终端,我们通过媒体查询,针对要适配的每种终端都得设置相应的样式甚至是改变网页结构,而且开发和维护起来也很麻烦.而 Bootstra

初识bootstrap框架栅格系统

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>

【Bootstrap Demo】入门例子创建

本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快捷的创建一个的简单例子.这个例子只有基本的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素. 在Bootstrap的官方网站的下载页面 http://getbootstrap.com/getting-started/#download ,也有

【读书笔记《Bootstrap 实战》】6.单页营销网站

我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型介绍性传送带图片展示区,配有自定义的响应式欢迎信息: □ 一个客户留言区,显示为带标题的图片墙,就像砖垒的一样: □ 一个功能清单,使用大号 Font Awesome 图标: □ 一个带有自定义价目表的注册区: □ 一个带动态滚动的 ScrollSpy 导航条. 1.概况 有一位潜在客户联系我们,她

【Bootstrap】2.作品展示站点

假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这个项目可以利用Bootstrap的很多内置特性,同时也将根据需要对Bootstrap进行一些定制. 1.设计目标 虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小设备开始,强迫自己聚焦在关键的要素上面. 这个作品展示站点应该具有下列功能: □ 带Logo的可折叠的响应式导航条: □ 重点展示四

bootstrap系列学习（一）

最近的一个项目中,正好使用到bootstrap布局前台页面,随便记录一下,个人遇到的一些问题. 一,jquery 版本 使用bootstrap3.0,刚开始没有 按照官网上教程,用了习惯的jquery 1.4版本,结果有些特效,显示不出来,后来看了一下官网,发现要用jquery1.11的. 二,模态框的位置,官网的模态框的显示位置比较上,想调整一下,翻了官网好几遍也没有找到相关参数,无意间一位同事和我说用padding-top 试试,结果可以了, 有时候就是一直钻在牛角里,出来了就一片明亮!在