bootstrap笔记

最新推荐文章于 2023-03-07 20:24:49 发布
最新推荐文章于 2023-03-07 20:24:49 发布
阅读量250 收藏
点赞数
分类专栏： 学习记录 前端 文章标签： bootstrap html 前端 排版 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imogq/article/details/60869939
版权

样式排版

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">
</head>
<body style="margin:80px;">
    <!-- 标题样式 -->
    <!-- <h1>hello <small>world</small></h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5> -->
    <!-- 标记 -->
    <!-- <p class="h1">nihao</p>
    <p><del>ni</del>  <mark>hao</mark> </p> -->
    <!-- 对齐 -->
    <!-- <p class="text-left">hello world</p>
    <p class="text-right">hello world</p>
    <p class="text-center">hello world</p>
    <p class="text-nowrap" style="width: 30px;border: 1px solid red;">hello world</p>
    <p>hello world</p> -->
    <!-- 引用文本 -->
    <!-- <blockquote>
        引用文本
    </blockquote>
    <blockquote class="pull-right">引用文本</blockquote> -->
    <!-- 列表 -->
    <!-- <ul class="list-unstyled list-inline" style="margin: 50px;">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul> -->
    <!-- 水平 -->
    <!-- <dl class="dl-horizontal">
        <dt>介绍</dt>
        <dd>fhwohefoanfonawoefnonsaohfaho</dd>
    </dl> -->
    <!-- 代码 -->
    <!-- <code>echo "hellw world"</code>
    press <kbd>ctrl+,</kbd>
    <pre>
        &lt ?php
        echo 'helle world';
        ?&gt
    </pre> -->
    </body>
</html>

表格与按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格与按钮</title>
    <link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">
</head>
<body style="margin:80px;">
<!-- <table class="table table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr class="success">
            <td>1</td>
            <td>小明</td>
            <td>男</td>
            <td>15</td>
        </tr>
        <tr class="warning">
            <td>2</td>
            <td>小花</td>
            <td>女</td>
            <td>32</td>
        </tr>
        <tr class="danger">
            <td>3</td>
            <td>小李</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </tbody>
</table>
 -->
 <!-- 按钮 -->
 <!-- <a href="http://www.baidu.com" class="btn btn-default " >a</a>
 <input type="submit" class="btn btn-default disabled" value="input">
 <button class="btn btn-default btn-block">button</button> -->


<script src="http://localhost/Public/Js/jquery.js"></script>
<script src="http://localhost/Public/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

表单与图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与图片</title>
    <link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin:80px;">
<form action="#" >
    <div class="form-group has-success has-feedback" >
        <label for="usernmae " class="control-label">用户名:</label>
        <input type="text" id="usernmae" name="usernmae" placeholder='请输入您的用户名' class="form-control">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group ">
        <label for="password">密&nbsp&nbsp&nbsp&nbsp码:</label>
        <input type="password" id="password" name="password" placeholder='请输入您的密码' class="form-control">
    </div>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" name="money">
        <div class="input-group-addon">.00</div>
    </div>
</form>
<!-- 标签与输入框通行 -->
<!-- <form action="#" class="form-horizontal" >
    <div class="form-group">
        <label for="usernmae" class="col-sm-2 control-label">用户名:</label>
        <div class="col-sm-10">
            <input type="text" id="usernmae" name="usernmae" placeholder='请输入您的用户名' class="form-control">
        </div>
    </div>
    <div class="form-group ">
        <label for="password" class="col-sm-2 control-label">密&nbsp&nbsp&nbsp&nbsp码:</label>
        <div class="col-sm-10">
            <input type="password" id="password" name="password" placeholder='请输入您的密码' class="form-control">
        </div>
    </div>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" name="money">
        <div class="input-group-addon">.00</div>
    </div>
</form> -->
<!-- 复选框 -->
<!-- <form action="">
    <div class="checkbox">
        <label for="ty">
            <input type="checkbox" name="hby" id="ty">体育
        </label>
    </div>
    <div class="checkbox disabled">
        <label class="disabled">
            <input type="checkbox" name="hby" id="ls" class="disabled">历史
        </label>
    </div>
    <label for="ty" class="checkbox-inline">
        <input type="checkbox" name="hby" id="ty">体育
    </label>
    <label class="checkbox-inline disabled">
        <input type="checkbox" name="hby" id="ls" class="disabled">历史
    </label>
</form> -->

<!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-thumbnail"> -->
<!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-circle"> -->
<!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-rounded"> -->

<script src="http://localhost/Public/Js/jquery.js"></script>
<script src="http://localhost/Public/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
理想coder
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 笔记
qq_42316056的博客
08-23 290
Bootstrap 小白笔记
BOOTSTRAP笔记
m0_52552720的博客
01-23 217
BOOTSTRAP笔记 栅格系统, 2.巨幕组件 Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 主要包含了栅格系统、全局CSS样式、组件和 JavaScript插件， 而 Bootstrap 的所有 JavaScript 插件都是用 jQuery 写的，所以 jQuery 必须在 Bootstrap 之前引入在HTML中，我们用标签引入外部样式(css)。 实例： <link rel="
BootStrap笔记
yue1915364525的博客
08-16 132
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
Bootstrap笔记大全
最新发布
认真学习前端的博客
03-07 1584
Bootstrap笔记大全
Bootstrap笔记
是木子啦~
08-06 100
概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处： 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 响应式布局。 同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 在项目中将这三个文件.
BootStrap笔记参考（全）-优极限
weixin_51717662的博客
04-16 1656
BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3.2栅格网格系统 4.常用样式 4.1排版 4.2 表单 4.3 缩略图 4.4 面板 5.BootStrap插件 5.1 导航 5.2分页导航 5.3 下拉菜单 5.4模态框
BootStrap笔记5
senmu_的博客
11-09 107
背景 1.强调的背景 深蓝色，一般用在需要强调的文字上 bg-primary 2.成功操作文字的背景 绿色，一般用在操作成功了的文字上 bg-success 3.信息提示文字的背景 浅蓝色，一般用在提示性的文字上 bg-info 4.警告提示文字的背景 黄色，一般用在警告信息的文字上 bg-warning 5.危险提示文字的背景 红色，一般用在危险信息的文字上 bg-danger ...
bootstrap笔记总结
12-29
Bootstrap 笔记总结 Bootstrap 是一个流行的前端框架，用于快速构建响应式的 web 应用程序。下面是 Bootstrap 相关的知识点总结： Base CSS * Bootstrap 提供了一个基本的 CSS 框架，使得开发者可以快速构建响应...
html5适配手机屏幕
Fenglin's Blog
03-28 4019
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 1、width=device-width ：表示宽度是设备屏幕的宽度 2、initial-scale=1.0：表示初始的缩放比例 3、m
在mysql日志中输出错误sql语句
Fenglin's Blog
06-03 3550
linux中/etc/my.cnf文件中添加 log-warning=2 log=/var/lib/mysql/sql.log
PHP单元测试
Fenglin's Blog
06-03 3178
什么是单元测试 百度百科： 百度百科：单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如C语言中单元指一个函数，Java里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等。总的来说，单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。 单元测试之我见 单元测试，就是把我们写的函数或者类作为一个单元，检
wordpress主题制作学习记录
Fenglin's Blog
09-05 762
在学习wordpress主题开发时常用的函数以及作用 学习资料来自于我爱水煮鱼博客 http://blog.wpjam.com/m/wp-theme-lesson-1-intro/ 函数 功能 备注 bloginfo(‘name’) 输出博客名 bloginfo(‘url’) 输出博客链接 bloginfo(‘description’) 输
tp&smarty使用日记
Fenglin's Blog
02-18 694
在smarty中使时间戳变成年/月/日格式: {$v.goods_create_time|date_format:"%Y-%m-%d %H:%M:%S"} 在tp中获取系统提供的可以使用的常量:get_defined_constants(true);
php笔试题
Fenglin's Blog
08-02 570
一． 字符串操做1. 表单中get和post的区别？ 答：get发送HTTP请求是通过url参数传递进行接，而post是实体数据，可以通过表单提交大量数据; 2. 用PHP打印出前一天的时间格式是2006-5-10 22:21:21 答：echo date(“y-m-d H:i:s”,strtotime(“-1 days”)); 3. 如何实现字符串翻转? echo strre
javacript 数组操作
Fenglin's Blog
03-28 454
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象和数组</title> </head> <body></body> </html> <script type="text/javascript"> /* var box = ['ogq',25,'student',new Date()]; alert(box
服务器环境搭建
Fenglin's Blog
03-08 406
安装 yum install rpm 安装集成环境 rpm -Uvh http://mirrors.ustc.edu.cn/epel/5/i386/epel-release-5-4.noarch.rpm 安装apache/mysql/php yum install --enablerepo=epel php53 php53-mbstring php53-mysql php53-pdo ph
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值